<!DOCTYPE html>
<html lang=en>
<head>
    <!-- so meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />
    <meta name="description" content="知乎：JS零基础入门到精通Javascript 随堂教程 - 知学堂 (zhihu.com) 1.什么是js？ 2023&#x2F;1&#x2F;26 html: 页面结构（表示你的页面内容）CSS：页面样式（决定页面的内容是什么样子，在上面位置）javascript：页面行为（表示了你的页面中每一个内容如何变化，有什么行为内容）js的三大核心1.ECMAScript &#x3D;&gt; JS的">
<meta property="og:type" content="article">
<meta property="og:title" content="JS零基础入门到精通">
<meta property="og:url" content="https://ke-jiabiao.gitee.io/develop/2023/03/23/front_end/%E7%9F%A5%E4%B9%8E%EF%BC%9AJS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/index.html">
<meta property="og:site_name" content="山野笨拙">
<meta property="og:description" content="知乎：JS零基础入门到精通Javascript 随堂教程 - 知学堂 (zhihu.com) 1.什么是js？ 2023&#x2F;1&#x2F;26 html: 页面结构（表示你的页面内容）CSS：页面样式（决定页面的内容是什么样子，在上面位置）javascript：页面行为（表示了你的页面中每一个内容如何变化，有什么行为内容）js的三大核心1.ECMAScript &#x3D;&gt; JS的">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230129163150862.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230307190949493.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230307191021051.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230309161158239.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230311232059813.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230311232219767.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230311232246540.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230311232347999.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230312101844370.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230312103650738.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230312104458482.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230312211913946.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230313195142394.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230313202846832.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230314160400651.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230324231408766.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230324232541399.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230325000814317.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230329213551839.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230329213715349.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230329213835827.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230329213826147.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230329214035622.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230329214157663.png">
<meta property="article:published_time" content="2023-03-22T16:00:00.000Z">
<meta property="article:modified_time" content="2023-07-23T12:18:12.933Z">
<meta property="article:author" content="man虎下山">
<meta property="article:tag" content="front-end">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230129163150862.png">
    
    
      
        
          <link rel="shortcut icon" href="/develop/images/favicon.ico">
        
      
      
        
          <link rel="icon" type="image/png" href="/develop/images/favicon-192x192.png" sizes="192x192">
        
      
      
        
          <link rel="apple-touch-icon" sizes="180x180" href="/develop/images/apple-touch-icon.png">
        
      
    
    <!-- title -->
    <title>JS零基础入门到精通</title>
    <!-- async scripts -->
    <!-- Google Analytics -->


    <!-- Umami Analytics -->


    <!-- styles -->
    
<link rel="stylesheet" href="/develop/css/style.css">

    <!-- persian styles -->
    
    <!-- rss -->
    
    
	<!-- mathjax -->
	
<meta name="generator" content="Hexo 6.3.0"></head>

<body class="max-width mx-auto px3 ltr">
    
      <div id="header-post">
  <a id="menu-icon" href="#" aria-label="Menu"><i class="fa-solid fa-bars fa-lg"></i></a>
  <a id="menu-icon-tablet" href="#" aria-label="Menu"><i class="fa-solid fa-bars fa-lg"></i></a>
  <a id="top-icon-tablet" href="#" aria-label="Top" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');" style="display:none;"><i class="fa-solid fa-chevron-up fa-lg"></i></a>
  <span id="menu">
    <span id="nav">
      <ul>
        <!--
       --><li><a href="/develop/">Home</a></li><!--
     --><!--
       --><li><a href="/develop/about/">About</a></li><!--
     --><!--
       --><li><a href="/develop/archives/">Writing</a></li><!--
     --><!--
       --><li><a target="_blank" rel="noopener" href="http://github.com/probberechts">Projects</a></li><!--
     -->
      </ul>
    </span>
    <br/>
    <span id="actions">
      <ul>
        
        <li><a class="icon" aria-label="Previous post" href="/develop/2023/07/23/siemens/%E8%A5%BF%E9%97%A8%E5%AD%90%E6%9D%AF/"><i class="fa-solid fa-chevron-left" aria-hidden="true" onmouseover="$('#i-prev').toggle();" onmouseout="$('#i-prev').toggle();"></i></a></li>
        
        
        <li><a class="icon" aria-label="Next post" href="/develop/2023/03/22/after_end/C++%E6%95%99%E7%A8%8B%EF%BC%8849%20%E6%95%B0%E7%BB%84-%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84%E6%A1%88%E4%BE%8B-%E8%80%83%E8%AF%95%E6%88%90%E7%BB%A9%E7%BB%9F%E8%AE%A1%E5%93%94%E5%93%A9%E5%93%94%E5%93%A9bilibili%EF%BC%89/"><i class="fa-solid fa-chevron-right" aria-hidden="true" onmouseover="$('#i-next').toggle();" onmouseout="$('#i-next').toggle();"></i></a></li>
        
        <li><a class="icon" aria-label="Back to top" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fa-solid fa-chevron-up" aria-hidden="true" onmouseover="$('#i-top').toggle();" onmouseout="$('#i-top').toggle();"></i></a></li>
        <li><a class="icon" aria-label="Share post" href="#"><i class="fa-solid fa-share-alt" aria-hidden="true" onmouseover="$('#i-share').toggle();" onmouseout="$('#i-share').toggle();" onclick="$('#share').toggle();return false;"></i></a></li>
      </ul>
      <span id="i-prev" class="info" style="display:none;">Previous post</span>
      <span id="i-next" class="info" style="display:none;">Next post</span>
      <span id="i-top" class="info" style="display:none;">Back to top</span>
      <span id="i-share" class="info" style="display:none;">Share post</span>
    </span>
    <br/>
    <div id="share" style="display: none">
      <ul>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.facebook.com/sharer.php?u=https://ke-jiabiao.gitee.io/develop/2023/03/23/front_end/%E7%9F%A5%E4%B9%8E%EF%BC%9AJS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/"><i class="fab fa-facebook " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://twitter.com/share?url=https://ke-jiabiao.gitee.io/develop/2023/03/23/front_end/%E7%9F%A5%E4%B9%8E%EF%BC%9AJS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&text=JS零基础入门到精通"><i class="fab fa-twitter " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.linkedin.com/shareArticle?url=https://ke-jiabiao.gitee.io/develop/2023/03/23/front_end/%E7%9F%A5%E4%B9%8E%EF%BC%9AJS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&title=JS零基础入门到精通"><i class="fab fa-linkedin " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://pinterest.com/pin/create/bookmarklet/?url=https://ke-jiabiao.gitee.io/develop/2023/03/23/front_end/%E7%9F%A5%E4%B9%8E%EF%BC%9AJS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&is_video=false&description=JS零基础入门到精通"><i class="fab fa-pinterest " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=JS零基础入门到精通&body=Check out this article: https://ke-jiabiao.gitee.io/develop/2023/03/23/front_end/%E7%9F%A5%E4%B9%8E%EF%BC%9AJS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/"><i class="fa-solid fa-envelope " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://getpocket.com/save?url=https://ke-jiabiao.gitee.io/develop/2023/03/23/front_end/%E7%9F%A5%E4%B9%8E%EF%BC%9AJS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&title=JS零基础入门到精通"><i class="fab fa-get-pocket " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://reddit.com/submit?url=https://ke-jiabiao.gitee.io/develop/2023/03/23/front_end/%E7%9F%A5%E4%B9%8E%EF%BC%9AJS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&title=JS零基础入门到精通"><i class="fab fa-reddit " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.stumbleupon.com/submit?url=https://ke-jiabiao.gitee.io/develop/2023/03/23/front_end/%E7%9F%A5%E4%B9%8E%EF%BC%9AJS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&title=JS零基础入门到精通"><i class="fab fa-stumbleupon " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://digg.com/submit?url=https://ke-jiabiao.gitee.io/develop/2023/03/23/front_end/%E7%9F%A5%E4%B9%8E%EF%BC%9AJS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&title=JS零基础入门到精通"><i class="fab fa-digg " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.tumblr.com/share/link?url=https://ke-jiabiao.gitee.io/develop/2023/03/23/front_end/%E7%9F%A5%E4%B9%8E%EF%BC%9AJS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&name=JS零基础入门到精通&description="><i class="fab fa-tumblr " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://news.ycombinator.com/submitlink?u=https://ke-jiabiao.gitee.io/develop/2023/03/23/front_end/%E7%9F%A5%E4%B9%8E%EF%BC%9AJS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&t=JS零基础入门到精通"><i class="fab fa-hacker-news " aria-hidden="true"></i></a></li>
</ul>

    </div>
    <div id="toc">
      <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9F%A5%E4%B9%8E%EF%BC%9AJS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A"><span class="toc-number">1.</span> <span class="toc-text">知乎：JS零基础入门到精通</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E4%BB%80%E4%B9%88%E6%98%AFjs%EF%BC%9F-2023-x2F-1-x2F-26"><span class="toc-number">1.1.</span> <span class="toc-text">1.什么是js？ 2023&#x2F;1&#x2F;26</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-js%E4%BB%A3%E7%A0%81%E7%9A%84%E4%B9%A6%E5%86%99%E4%BD%8D%E7%BD%AE"><span class="toc-number">1.2.</span> <span class="toc-text">2.js代码的书写位置</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-js%E5%AE%9A%E4%B9%89%E5%8F%98%E9%87%8F"><span class="toc-number">1.3.</span> <span class="toc-text">3.js定义变量</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E8%BE%93%E5%87%BA%E8%AF%AD%E6%B3%95"><span class="toc-number">1.4.</span> <span class="toc-text">4.输出语法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E4%B8%8E%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E7%9A%84%E6%A3%80%E6%B5%8B"><span class="toc-number">1.5.</span> <span class="toc-text">5.数据类型与数据类型的检测</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6-%E6%95%B0%E5%80%BC%E8%BD%AC%E6%8D%A2"><span class="toc-number">1.6.</span> <span class="toc-text">6.数值转换</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#6-1%E8%BD%AC%E6%95%B0%E5%AD%97"><span class="toc-number">1.6.1.</span> <span class="toc-text">6.1转数字</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#6-2%E8%BD%AC%E6%96%87%E6%9C%AC"><span class="toc-number">1.6.2.</span> <span class="toc-text">6.2转文本**</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#6-3%E8%BD%AC%E5%B8%83%E5%B0%94"><span class="toc-number">1.6.3.</span> <span class="toc-text">6.3转布尔</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7-arguments-1-x2F-28"><span class="toc-number">1.7.</span> <span class="toc-text">7.arguments  1&#x2F;28</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#8-%E4%BD%9C%E7%94%A8%E5%9F%9F%E7%9A%84%E6%9C%BA%E5%88%B6"><span class="toc-number">1.8.</span> <span class="toc-text">8.作用域的机制</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#8-1%E5%8F%98%E9%87%8F%E8%B5%8B%E5%80%BC%E6%9C%BA%E5%88%B6"><span class="toc-number">1.8.1.</span> <span class="toc-text">8.1变量赋值机制</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#8-2%E5%8F%98%E9%87%8F%E8%AE%BF%E9%97%AE%E6%9C%BA%E5%88%B6"><span class="toc-number">1.8.2.</span> <span class="toc-text">8.2变量访问机制</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#9-%E9%A2%84%E8%A7%A3%E6%9E%90-1-x2F-29"><span class="toc-number">1.9.</span> <span class="toc-text">9.预解析   1&#x2F;29</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#9-1%E9%A2%84%E8%A7%A3%E6%9E%90"><span class="toc-number">1.9.1.</span> <span class="toc-text">9.1预解析**</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#9-2%E9%A2%84%E8%A7%A3%E6%9E%90%E7%9A%84%E9%87%8D%E5%91%BD%E5%90%8D%E9%97%AE%E9%A2%98"><span class="toc-number">1.9.2.</span> <span class="toc-text">9.2预解析的重命名问题</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#10-%E5%AF%B9%E8%B1%A1%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-number">1.10.</span> <span class="toc-text">10.对象数据类型</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#10-1Object"><span class="toc-number">1.10.1.</span> <span class="toc-text">10.1Object</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#10-2%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%93%8D%E4%BD%9C"><span class="toc-number">1.10.2.</span> <span class="toc-text">10.2对象的基本操作**</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#10-3%E4%B8%A4%E7%A7%8D%E8%BF%90%E7%AE%97%E7%AC%A6%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">1.10.3.</span> <span class="toc-text">10.3两种运算符的区别**</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#10-4%E5%AF%B9%E8%B1%A1%E7%9A%84%E9%81%8D%E5%8E%86"><span class="toc-number">1.10.4.</span> <span class="toc-text">10.4对象的遍历</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#10-5%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E5%AD%98%E5%82%A8%E4%B8%8A%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">1.10.5.</span> <span class="toc-text">10.5数据类型存储上的区别**</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#10-6%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E8%B5%8B%E5%80%BC%E4%B8%8A%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">1.10.6.</span> <span class="toc-text">10.6数据类型赋值上的区别</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#11-%E6%8E%92%E5%BA%8F-1-x2F-30"><span class="toc-number">1.11.</span> <span class="toc-text">11.排序 1&#x2F;30</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#12-%E6%95%B0%E7%BB%84%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95"><span class="toc-number">1.12.</span> <span class="toc-text">12.数组常用方法</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#12-1%E6%95%B0%E7%BB%84-push"><span class="toc-number">1.12.1.</span> <span class="toc-text">12.1数组.push()</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-2%E6%95%B0%E7%BB%84-pop"><span class="toc-number">1.12.2.</span> <span class="toc-text">12.2数组.pop()</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-3%E6%95%B0%E7%BB%84-unshift"><span class="toc-number">1.12.3.</span> <span class="toc-text">12.3数组.unshift()</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-4%E6%95%B0%E7%BB%84-shift"><span class="toc-number">1.12.4.</span> <span class="toc-text">12.4数组.shift()</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-5%E6%95%B0%E7%BB%84-reserve"><span class="toc-number">1.12.5.</span> <span class="toc-text">12.5数组.reserve()</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-6%E6%95%B0%E7%BB%84-sort"><span class="toc-number">1.12.6.</span> <span class="toc-text">12.6数组.sort()</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-7%E6%95%B0%E7%BB%84-sort-function-a-b-return-a-b"><span class="toc-number">1.12.7.</span> <span class="toc-text">12.7数组.sort(function(a,b){return a-b})</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-8%E6%95%B0%E7%BB%84-sort-function-a-b-return-a-b"><span class="toc-number">1.12.8.</span> <span class="toc-text">12.8数组.sort(function(a,b){return a-b})</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-9%E6%95%B0%E7%BB%84-splice-%E5%BC%80%E5%A7%8B%E7%9A%84%E7%B4%A2%E5%BC%95%EF%BC%8C%E6%88%AA%E5%8F%96%E7%9A%84%E6%95%B0%E9%87%8F"><span class="toc-number">1.12.9.</span> <span class="toc-text">12.9数组.splice(开始的索引，截取的数量)</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-10%E6%95%B0%E7%BB%84-concat-%E6%95%B0%E6%8D%AE"><span class="toc-number">1.12.10.</span> <span class="toc-text">12.10数组.concat(数据)</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-11%E6%95%B0%E7%BB%84-join-%E2%80%98%E8%BF%9E%E6%8E%A5%E7%AC%A6%E2%80%99"><span class="toc-number">1.12.11.</span> <span class="toc-text">12.11数组.join(‘连接符’)</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-12%E6%95%B0%E7%BB%84-slice-%E5%BC%80%E5%A7%8B%E7%B4%A2%E5%BC%95%EF%BC%8C%E7%BB%93%E6%9D%9F%E7%B4%A2%E5%BC%95"><span class="toc-number">1.12.12.</span> <span class="toc-text">12.12数组.slice(开始索引，结束索引)</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-13%E6%95%B0%E7%BB%84-indexOf-%E6%95%B0%E6%8D%AE%EF%BC%8C%E5%BC%80%E5%A7%8B%E7%B4%A2%E5%BC%95"><span class="toc-number">1.12.13.</span> <span class="toc-text">12.13数组.indexOf(数据，开始索引)</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-14%E6%95%B0%E7%BB%84-forEach-item-index-arr-x3D-gt"><span class="toc-number">1.12.14.</span> <span class="toc-text">12.14数组.forEach((item,index,arr)&#x3D;&gt;{})</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-15%E6%95%B0%E7%BB%84-map-item-index-arr-x3D-gt-return-item-10"><span class="toc-number">1.12.15.</span> <span class="toc-text">12.15数组.map((item,index,arr)&#x3D;&gt;{return item*10})</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-16%E6%95%B0%E7%BB%84-filter-x3D-gt-return-item-gt-10"><span class="toc-number">1.12.16.</span> <span class="toc-text">12.16数组.filter(()&#x3D;&gt;{return item&gt;10})</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-17%E6%95%B0%E7%BB%84-every-item-index-arr-x3D-gt-%E6%95%B0%E7%BB%84-some-item-index-arr-x3D-gt"><span class="toc-number">1.12.17.</span> <span class="toc-text">12.17数组.every((item,index,arr)&#x3D;&gt;{}) || 数组.some((item,index,arr)&#x3D;&gt;{})</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-18%E6%95%B0%E7%BB%84-reduce-prev-item-index-arr-x3D-gt"><span class="toc-number">1.12.18.</span> <span class="toc-text">12.18数组.reduce((prev,item,index,arr)&#x3D;&gt;{})</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-19%E6%95%B0%E7%BB%84%E5%A1%8C%E9%99%B7%E2%80%94%E5%87%BA%E7%8E%B0%E5%9C%A8%E6%95%B0%E7%BB%84%E4%B8%AD%E5%88%A0%E9%99%A4%E6%95%B0%E6%8D%AE%E7%9A%84%E6%97%B6%E5%80%99-1-x2F-31"><span class="toc-number">1.12.19.</span> <span class="toc-text">12.19数组塌陷—出现在数组中删除数据的时候 1&#x2F;31</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#13-%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D"><span class="toc-number">1.13.</span> <span class="toc-text">13.数组去重</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#14-%E5%AD%97%E7%AC%A6%E9%9B%86"><span class="toc-number">1.14.</span> <span class="toc-text">14.字符集</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#15-%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95"><span class="toc-number">1.15.</span> <span class="toc-text">15.字符串常用方法</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#15-1%E5%AD%97%E7%AC%A6%E4%B8%B2-replace-%E2%80%98%E6%8D%A2%E4%B8%8B%E5%AD%97%E7%AC%A6%E2%80%99-%E2%80%99%E6%8D%A2%E4%B8%8A%E5%AD%97%E7%AC%A6%E2%80%99"><span class="toc-number">1.15.1.</span> <span class="toc-text">15.1字符串.replace(‘换下字符’,’换上字符’)</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#15-2%E5%AD%97%E7%AC%A6%E4%B8%B2-split-%E2%80%98%E5%88%87%E5%89%B2%E7%AC%A6%E5%8F%B7%E2%80%99"><span class="toc-number">1.15.2.</span> <span class="toc-text">15.2字符串.split(‘切割符号’)</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#15-3%E4%BB%BB%E5%8A%A1%EF%BC%9A%E6%9B%BF%E6%8D%A2%E6%95%8F%E6%84%9F%E8%AF%8D"><span class="toc-number">1.15.3.</span> <span class="toc-text">15.3任务：替换敏感词</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#16-%E6%9F%A5%E8%AF%A2%E5%AD%97%E7%AC%A6%E4%B8%B2-2-x2F-1"><span class="toc-number">1.16.</span> <span class="toc-text">16.查询字符串 2&#x2F;1</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#16-1%E6%8A%8A%E5%AF%B9%E8%B1%A1%E8%BD%AC%E6%8D%A2%E6%88%90%E6%9F%A5%E8%AF%A2%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%88%E4%B8%BA%E4%BA%86%E6%8A%8A%E5%89%8D%E7%AB%AF%E5%BE%97%E5%88%B0%E7%9A%84%E6%95%B0%E6%8D%AE%E7%BB%99%E5%90%8E%E7%AB%AF%E4%BD%BF%E7%94%A8%EF%BC%89"><span class="toc-number">1.16.1.</span> <span class="toc-text">16.1把对象转换成查询字符串（为了把前端得到的数据给后端使用）</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#16-2%E6%8A%8A%E6%9F%A5%E8%AF%A2%E5%AD%97%E7%AC%A6%E4%B8%B2%E8%BD%AC%E6%88%90%E5%AF%B9%E8%B1%A1%EF%BC%88%E4%B8%BA%E4%BA%86%E5%90%8E%E7%AB%AF%E7%9A%84%E6%95%B0%E6%8D%AE%E4%BC%A0%E5%88%B0%E5%89%8D%E7%AB%AF%EF%BC%89"><span class="toc-number">1.16.2.</span> <span class="toc-text">16.2把查询字符串转成对象（为了后端的数据传到前端）</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#17-json%E6%A0%BC%E5%BC%8F%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-number">1.17.</span> <span class="toc-text">17.json格式字符串</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#18-%E6%93%8D%E4%BD%9C%E6%95%B0%E5%AD%97%E7%9A%84%E6%96%B9%E6%B3%95"><span class="toc-number">1.18.</span> <span class="toc-text">18.操作数字的方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#19-%E6%97%B6%E9%97%B4%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.19.</span> <span class="toc-text">19.时间对象</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#19-1time-getTime"><span class="toc-number">1.19.1.</span> <span class="toc-text">19.1time.getTime()</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#19-2%E6%97%B6%E9%97%B4%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%A1%88%E4%BE%8B-2-x2F-2"><span class="toc-number">1.19.2.</span> <span class="toc-text">19.2时间格式化案例 2&#x2F;2</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#19-3%E6%97%B6%E9%97%B4%E5%B7%AE%E6%A1%88%E4%BE%8B"><span class="toc-number">1.19.3.</span> <span class="toc-text">19.3时间差案例</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#19-4%E5%AE%9A%E6%97%B6%E5%99%A8"><span class="toc-number">1.19.4.</span> <span class="toc-text">19.4定时器</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#19-5js%E7%9A%84%E5%BC%82%E6%AD%A5%E4%BB%A3%E7%A0%81%E6%89%A7%E8%A1%8C%E6%9C%BA%E5%88%B6"><span class="toc-number">1.19.5.</span> <span class="toc-text">19.5js的异步代码执行机制</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#19-6%E5%80%92%E8%AE%A1%E6%97%B6%E6%A1%88%E4%BE%8B"><span class="toc-number">1.19.6.</span> <span class="toc-text">19.6倒计时案例</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#20-%E8%AE%A4%E8%AF%86BOM%E6%A8%A1%E5%9E%8B-2-x2F-3"><span class="toc-number">1.20.</span> <span class="toc-text">20.认识BOM模型  2&#x2F;3</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#20-1%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E7%AA%97%E5%8F%A3%E5%B0%BA%E5%AF%B8"><span class="toc-number">1.20.1.</span> <span class="toc-text">20.1浏览器的窗口尺寸</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#20-2%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E5%9C%B0%E5%9D%80%E6%A0%8F"><span class="toc-number">1.20.2.</span> <span class="toc-text">20.2浏览器的地址栏</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#20-3%E6%89%93%E5%BC%80%E6%96%B0%E7%9A%84%E6%A0%87%E7%AD%BE%E9%A1%B5"><span class="toc-number">1.20.3.</span> <span class="toc-text">20.3打开新的标签页</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#20-4%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8D%B7%E5%8E%BB%E7%9A%84%E5%B0%BA%E5%AF%B8"><span class="toc-number">1.20.4.</span> <span class="toc-text">20.4浏览器卷去的尺寸</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#20-5BOM%E5%AE%9E%E4%BE%8B"><span class="toc-number">1.20.5.</span> <span class="toc-text">20.5BOM实例</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#21-DOM%E6%A8%A1%E5%9E%8B"><span class="toc-number">1.21.</span> <span class="toc-text">21.DOM模型</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#21-1DOM%E7%9A%84%E4%BB%8B%E7%BB%8D"><span class="toc-number">1.21.1.</span> <span class="toc-text">21.1DOM的介绍</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#21-2%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0"><span class="toc-number">1.21.2.</span> <span class="toc-text">21.2获取元素</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#22-%E6%93%8D%E4%BD%9C%E5%85%83%E7%B4%A0%E5%86%85%E5%AE%B9"><span class="toc-number">1.22.</span> <span class="toc-text">22.操作元素内容</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#22-1document-createElement-%E2%80%98%E6%A0%87%E7%AD%BE%E5%90%8D%E2%80%99"><span class="toc-number">1.22.1.</span> <span class="toc-text">22.1document.createElement(‘标签名’)</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#22-2%E5%85%83%E7%B4%A0-appendChild"><span class="toc-number">1.22.2.</span> <span class="toc-text">22.2元素.appendChild()</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#23-%E5%8A%A8%E6%80%81%E6%B8%B2%E6%9F%93%E8%A1%A8%E6%A0%BC%E6%A1%88%E4%BE%8B"><span class="toc-number">1.23.</span> <span class="toc-text">23.动态渲染表格案例</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#24-3%E6%93%8D%E4%BD%9C%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F"><span class="toc-number">1.23.1.</span> <span class="toc-text">24.3操作元素样式</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#24-4%E6%93%8D%E4%BD%9C%E5%85%83%E7%B4%A0%E7%B1%BB%E5%90%8D"><span class="toc-number">1.23.2.</span> <span class="toc-text">24.4操作元素类名**</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#24-5%E5%88%86%E9%A1%B5%E6%B8%B2%E6%9F%93%E6%A1%88%E4%BE%8B"><span class="toc-number">1.23.3.</span> <span class="toc-text">24.5分页渲染案例</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#25-%E8%8E%B7%E5%8F%96%E5%B0%BA%E5%AF%B8"><span class="toc-number">1.24.</span> <span class="toc-text">25.获取尺寸</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#25-1%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E5%B0%BA%E5%AF%B8"><span class="toc-number">1.24.1.</span> <span class="toc-text">25.1获取元素尺寸</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#25-2%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E5%81%8F%E7%A7%BB%E9%87%8F"><span class="toc-number">1.24.2.</span> <span class="toc-text">25.2获取元素偏移量</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#25-3%E8%8E%B7%E5%8F%96%E7%AA%97%E5%8F%A3%E5%B0%BA%E5%AF%B8%E5%AE%BD%E9%AB%98"><span class="toc-number">1.24.3.</span> <span class="toc-text">25.3获取窗口尺寸宽高</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#25-4%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A"><span class="toc-number">1.24.4.</span> <span class="toc-text">25.4事件绑定</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#25-5%E4%BA%8B%E4%BB%B6%E8%A7%A3%E7%BB%91"><span class="toc-number">1.24.5.</span> <span class="toc-text">25.5事件解绑</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#25-6%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.24.6.</span> <span class="toc-text">25.6事件对象</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#25-7%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%E4%B8%AD%E7%9A%84%E5%B0%BA%E5%AF%B8%E5%B1%9E%E6%80%A7"><span class="toc-number">1.24.7.</span> <span class="toc-text">25.7事件对象中的尺寸属性</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#26-%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%E7%9A%84%E4%BC%A0%E6%92%AD"><span class="toc-number">1.25.</span> <span class="toc-text">26.事件对象的传播</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#26-1%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%E7%9A%84%E4%BC%A0%E6%92%AD%E9%A1%BA%E5%BA%8F"><span class="toc-number">1.25.1.</span> <span class="toc-text">26.1事件对象的传播顺序</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#26-2%E8%8E%B7%E5%8F%96%E4%BA%8B%E4%BB%B6%E7%9B%AE%E6%A0%87-e-target-e-srcElement"><span class="toc-number">1.25.2.</span> <span class="toc-text">26.2获取事件目标 e.target || e.srcElement**</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#26-3%E9%98%BB%E6%AD%A2%E4%BA%8B%E4%BB%B6%E4%BC%A0%E6%92%AD"><span class="toc-number">1.25.3.</span> <span class="toc-text">26.3阻止事件传播</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#26-4%E9%98%BB%E6%AD%A2%E9%BB%98%E8%AE%A4%E8%A1%8C%E4%B8%BA"><span class="toc-number">1.25.4.</span> <span class="toc-text">26.4阻止默认行为</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#27-%E4%BA%8B%E4%BB%B6%E5%A7%94%E6%89%98"><span class="toc-number">1.26.</span> <span class="toc-text">27.事件委托**</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#28-%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%EF%BC%882023-3-x2F-9%EF%BC%89"><span class="toc-number">1.27.</span> <span class="toc-text">28.正则表达式（2023.3&#x2F;9）</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#28-1%E5%88%9B%E5%BB%BA%E6%96%B9%E6%B3%95"><span class="toc-number">1.27.1.</span> <span class="toc-text">28.1创建方法</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#28-2%E9%AA%8C%E8%AF%81%E6%96%B9%E6%B3%95"><span class="toc-number">1.27.2.</span> <span class="toc-text">28.2验证方法</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#175-186%E8%AF%BE%E7%A8%8B%E8%B7%B3%E8%BF%87%EF%BC%8C%E6%84%9F%E8%A7%89%E7%94%A8%E5%A4%84%E4%B8%8D%E6%98%AF%E5%BE%88%E5%A4%A7"><span class="toc-number">1.27.3.</span> <span class="toc-text">175-186课程跳过，感觉用处不是很大</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#29-%E8%87%AA%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0"><span class="toc-number">1.28.</span> <span class="toc-text">29.自执行函数</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#29-1%E8%87%AA%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0%EF%BC%88%E6%A6%82%E5%BF%B5%E6%9C%89%E7%82%B9%E6%84%8F%E6%80%9D%EF%BC%8C%E5%8F%AF%E8%83%BD%E6%AF%94%E8%BE%83%E9%87%8D%E8%A6%81%EF%BC%89"><span class="toc-number">1.28.1.</span> <span class="toc-text">29.1自执行函数（概念有点意思，可能比较重要）</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#29-2%E5%BC%BA%E8%A1%8C%E6%94%B9%E5%8F%98this%E6%8C%87%E5%90%91"><span class="toc-number">1.28.2.</span> <span class="toc-text">29.2强行改变this指向</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#30-ES6"><span class="toc-number">1.29.</span> <span class="toc-text">30.ES6</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#30-1ES6%E5%AE%9A%E4%B9%89%E5%8F%98%E9%87%8F"><span class="toc-number">1.29.1.</span> <span class="toc-text">30.1ES6定义变量</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#30-2ES6%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-number">1.29.2.</span> <span class="toc-text">30.2ES6模板字符串</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#30-3ES6%E7%9A%84%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0"><span class="toc-number">1.29.3.</span> <span class="toc-text">30.3ES6的箭头函数</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#30-4%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0%E9%BB%98%E8%AE%A4%E5%80%BC"><span class="toc-number">1.29.4.</span> <span class="toc-text">30.4函数参数默认值</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#30-5ES6%E7%9A%84%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC"><span class="toc-number">1.29.5.</span> <span class="toc-text">30.5ES6的解构赋值</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#30-6ES6%E7%9A%84%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">1.29.6.</span> <span class="toc-text">30.6ES6的扩展运算符</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#30-6%E8%BF%90%E5%8A%A8%E5%87%BD%E6%95%B0"><span class="toc-number">1.29.7.</span> <span class="toc-text">30.6运动函数</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#31-%E8%AE%A4%E8%AF%86%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.30.</span> <span class="toc-text">31.认识面向对象</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#31-1%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E7%9A%84%E4%B9%A6%E5%86%99"><span class="toc-number">1.30.1.</span> <span class="toc-text">31.1构造函数的书写</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#31-2%E5%AF%B9%E8%B1%A1%E8%AE%BF%E9%97%AE%E6%9C%BA%E5%88%B6"><span class="toc-number">1.30.2.</span> <span class="toc-text">31.2对象访问机制</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#32-%E5%8E%9F%E5%9E%8B%E5%92%8C%E5%8E%9F%E5%9E%8B%E9%93%BE"><span class="toc-number">1.31.</span> <span class="toc-text">32.原型和原型链</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#33-ES6%E7%9A%84%E7%B1%BB%E7%9A%84%E8%AF%AD%E6%B3%95%EF%BC%88ES5%E6%9E%84%E9%80%A0%E6%96%B9%E6%B3%95%E5%92%8C%E7%B1%BB%E7%9A%84%E5%8D%87%E7%BA%A7%EF%BC%8C%E4%BD%BF%E7%94%A8%E8%B5%B7%E6%9D%A5%E6%9B%B4%E5%8A%A0%E6%98%8E%E7%A1%AE%EF%BC%89"><span class="toc-number">1.32.</span> <span class="toc-text">33.ES6的类的语法（ES5构造方法和类的升级，使用起来更加明确）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#34-%E8%B4%AA%E5%90%83%E8%9B%87%E5%AE%9E%E4%BE%8B%EF%BC%88%E6%B2%A1%E6%9C%89%E7%B4%A0%E6%9D%90%E6%97%A0%E6%B3%95%E5%AE%9E%E7%8E%B0%EF%BC%89"><span class="toc-number">1.33.</span> <span class="toc-text">34.贪吃蛇实例（没有素材无法实现）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#35-%E5%89%8D%E5%90%8E%E7%AB%AF%E4%BA%A4%E4%BA%92"><span class="toc-number">1.34.</span> <span class="toc-text">35.前后端交互</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#35-1%E8%AF%B7%E6%B1%82%E6%96%B9%E5%BC%8F"><span class="toc-number">1.34.1.</span> <span class="toc-text">35.1请求方式</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#35-2%E7%99%BB%E5%BD%95%E9%A1%B5%E9%9D%A2%EF%BC%88%E6%B2%A1%E6%9C%89%E6%9C%8D%E5%8A%A1%E5%99%A8-%E4%B8%8D%E4%BA%86%E8%A7%A3node-js%EF%BC%89"><span class="toc-number">1.34.2.</span> <span class="toc-text">35.2登录页面（没有服务器-不了解node.js）</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#35-3ajax%E7%8A%B6%E6%80%81%E7%A0%81"><span class="toc-number">1.34.3.</span> <span class="toc-text">35.3ajax状态码</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#35-4http%E7%8A%B6%E6%80%81%E7%A0%81"><span class="toc-number">1.34.4.</span> <span class="toc-text">35.4http状态码</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#35-5ajax%E5%B0%81%E8%A3%85"><span class="toc-number">1.34.5.</span> <span class="toc-text">35.5ajax封装</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#35-6-268-273%E8%B7%B3%E8%BF%87"><span class="toc-number">1.34.6.</span> <span class="toc-text">35.6  268-273跳过</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#36-%E8%AE%A4%E8%AF%86Promise"><span class="toc-number">1.35.</span> <span class="toc-text">36.认识Promise</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#36-1aysnc%E5%92%8Cawait"><span class="toc-number">1.35.1.</span> <span class="toc-text">36.1aysnc和await</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#37-%E8%AE%A4%E8%AF%86%E6%9C%8D%E5%8A%A1%E5%99%A8-284"><span class="toc-number">1.36.</span> <span class="toc-text">37.认识服务器(284)</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#37-1php%E8%AF%AD%E6%B3%95"><span class="toc-number">1.36.1.</span> <span class="toc-text">37.1php语法</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#37-2php%E6%93%8D%E4%BD%9C%E6%95%B0%E6%8D%AE%E5%BA%93"><span class="toc-number">1.36.2.</span> <span class="toc-text">37.2php操作数据库</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#37-3%E6%95%B0%E6%8D%AE%E5%BA%93"><span class="toc-number">1.36.3.</span> <span class="toc-text">37.3数据库</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#37-4%E7%99%BB%E5%BD%95%E9%80%BB%E8%BE%91%E5%AE%9E%E7%8E%B0"><span class="toc-number">1.36.4.</span> <span class="toc-text">37.4登录逻辑实现</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#38-cookie"><span class="toc-number">1.37.</span> <span class="toc-text">38.cookie</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#38-1cookie%E7%9A%84%E7%89%B9%E6%80%A7%EF%BC%88%E4%B9%9F%E6%98%AF%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8%E7%9A%84%E4%B8%80%E7%A7%8D%EF%BC%89"><span class="toc-number">1.37.1.</span> <span class="toc-text">38.1cookie的特性（也是本地存储的一种）</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#38-2%E5%89%8D%E7%AB%AF%E8%AF%AD%E8%A8%80%E8%AE%BE%E7%BD%AEcookie-2023-x2F-3-x2F-14"><span class="toc-number">1.37.2.</span> <span class="toc-text">38.2前端语言设置cookie 2023&#x2F;3&#x2F;14</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#38-3%E5%90%8E%E7%AB%AF%E8%AF%AD%E8%A8%80%E8%AE%BE%E7%BD%AEcookie"><span class="toc-number">1.37.3.</span> <span class="toc-text">38.3后端语言设置cookie</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#38-4%E5%9C%B0%E5%9D%80"><span class="toc-number">1.37.4.</span> <span class="toc-text">38.4地址</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#38-5%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5"><span class="toc-number">1.37.5.</span> <span class="toc-text">38.5同源策略</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#38-6jsonp"><span class="toc-number">1.37.6.</span> <span class="toc-text">38.6jsonp</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#38-6%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E"><span class="toc-number">1.37.7.</span> <span class="toc-text">38.6搜索引擎</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#38-7cors%E8%B7%A8%E5%9F%9F"><span class="toc-number">1.37.8.</span> <span class="toc-text">38.7cors跨域</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#38-8%E4%BB%A3%E7%90%86%E8%B7%A8%E5%9F%9F%EF%BC%88proxy"><span class="toc-number">1.37.9.</span> <span class="toc-text">38.8代理跨域（proxy)</span></a></li></ol></li></ol></li></ol>
    </div>
  </span>
</div>

    
    <div class="content index py4 ">
        
        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
  <header>
    
    <h1 class="posttitle p-name" itemprop="name headline">
        JS零基础入门到精通
    </h1>



    <div class="meta">
      <span class="author p-author h-card" itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span class="p-name" itemprop="name">man虎下山</span>
      </span>
      
    <div class="postdate">
      
        <time datetime="2023-03-22T16:00:00.000Z" class="dt-published" itemprop="datePublished">2023-03-23</time>
        
      
    </div>


      
    <div class="article-category">
        <i class="fa-solid fa-archive"></i>
        <a class="category-link" href="/develop/categories/front-end/">front-end</a>
    </div>


      
    <div class="article-tag">
        <i class="fa-solid fa-tag"></i>
        <a class="p-category" href="/develop/tags/front-end/" rel="tag">front-end</a>
    </div>


    </div>
  </header>
  

  <div class="content e-content" itemprop="articleBody">
    <h3 id="知乎：JS零基础入门到精通"><a href="#知乎：JS零基础入门到精通" class="headerlink" title="知乎：JS零基础入门到精通"></a>知乎：JS零基础入门到精通</h3><p><a target="_blank" rel="noopener" href="https://www.zhihu.com/education/video-course/1487063041006718976?section_id=1487070700687548416">Javascript 随堂教程 - 知学堂 (zhihu.com)</a></p>
<h4 id="1-什么是js？-2023-x2F-1-x2F-26"><a href="#1-什么是js？-2023-x2F-1-x2F-26" class="headerlink" title="1.什么是js？ 2023&#x2F;1&#x2F;26"></a>1.什么是js？ 2023&#x2F;1&#x2F;26</h4><blockquote>
<p>html: 页面结构（表示你的页面内容）<br>CSS：页面样式（决定页面的内容是什么样子，在上面位置）<br>javascript：页面行为（表示了你的页面中每一个内容如何变化，有什么行为内容）<br>js的三大核心<br>1.ECMAScript &#x3D;&gt; JS的语法规范<br>2.BOM &#x3D;&gt;浏览器对象模型     一套操作浏览器的属性和方法<br>3.DOM &#x3D;&gt;文档对象模型  一套操作文档流的属性和方法<br>本质：使用JS的语法，让浏览器和文档流发生变化</p>
</blockquote>
<h4 id="2-js代码的书写位置"><a href="#2-js代码的书写位置" class="headerlink" title="2.js代码的书写位置"></a>2.js代码的书写位置</h4><ul>
<li><p>行内式【&lt;a javascript: console.log(‘123’);&gt;</a>】</p>
</li>
<li><p>内嵌式【<script> console.log('123') </script>】</p>
</li>
<li><p>外链式【&lt;script src&#x3D;’.&#x2F;test.js’(文件位置)&gt; </script>】 <strong>{test.js文件中内容 console.log(‘123’)}</strong></p>
</li>
</ul>
<h4 id="3-js定义变量"><a href="#3-js定义变量" class="headerlink" title="3.js定义变量"></a>3.js定义变量</h4><ul>
<li>var x1 x2;  &#x2F;&#x2F;   var x1 &#x3D; 100   x2</li>
</ul>
<h4 id="4-输出语法"><a href="#4-输出语法" class="headerlink" title="4.输出语法"></a>4.输出语法</h4><ul>
<li>document.write</li>
<li>console.log</li>
<li>alert</li>
</ul>
<h4 id="5-数据类型与数据类型的检测"><a href="#5-数据类型与数据类型的检测" class="headerlink" title="5.数据类型与数据类型的检测"></a>5.数据类型与数据类型的检测</h4><ul>
<li><p>undefined 和 null 都是空， 区别在于undefined是本来该有，但<strong>结果没有</strong>，null是<strong>有值</strong>，但<strong>结果是空值</strong></p>
</li>
<li><p>typeof —–输出结果为对应的数据类型</p>
</li>
</ul>
<h4 id="6-数值转换"><a href="#6-数值转换" class="headerlink" title="6.数值转换"></a>6.数值转换</h4><h5 id="6-1转数字"><a href="#6-1转数字" class="headerlink" title="6.1转数字"></a>6.1转数字</h5><ul>
<li><p>parseInt() 一位位转换，判断是否能转成合法的数字，只能转换成整数 比如 ‘10ab2’ 输出结果为10</p>
</li>
<li><p>parseFloat()  和上面的用法相同，但能识别小数点</p>
</li>
<li><p>Number()  把要转换的内容当作一个整体，如果能转换成合法数字，那么就是这个数字，如果不能转换成合法数字，则返回NaN （not a number)</p>
</li>
<li><p>非加法的数学运算</p>
<p>var s &#x3D; ‘100’ </p>
<p>var res &#x3D; s - 0</p>
<p>console.log(typeof(res))  &#x3D;&#x3D;&gt;输出为number</p>
</li>
</ul>
<h5 id="6-2转文本"><a href="#6-2转文本" class="headerlink" title="6.2转文本**"></a>6.2转文本**</h5><ul>
<li>toString() &#x3D;&gt;不能转换null和undefined</li>
<li>String() &#x3D;&gt;什么数据类型都可以转换</li>
<li>字符串与其它类型相连接</li>
</ul>
<h5 id="6-3转布尔"><a href="#6-3转布尔" class="headerlink" title="6.3转布尔"></a>6.3转布尔</h5><ul>
<li><p>Boolean(0) – Boolean(‘’) – Boolean(NaN) – Boolean(null)  – Boolean(undefined)</p>
<p>上面几个输出的结果都为false，其它结果都为true</p>
</li>
</ul>
<h4 id="7-arguments-1-x2F-28"><a href="#7-arguments-1-x2F-28" class="headerlink" title="7.arguments  1&#x2F;28"></a>7.arguments  1&#x2F;28</h4><p>js中宏定义的数组参数，可以直接在函数内部进行调用，不用进行声明</p>
<h4 id="8-作用域的机制"><a href="#8-作用域的机制" class="headerlink" title="8.作用域的机制"></a>8.作用域的机制</h4><h5 id="8-1变量赋值机制"><a href="#8-1变量赋值机制" class="headerlink" title="8.1变量赋值机制"></a>8.1变量赋值机制</h5><ul>
<li>当你给一个变量赋值的时候，如果自己的作用域有该变量，则给自己作用域的变量进行赋值，如果没有则一级一级向上寻找存在的相同变量名的变量进行赋值，直到window(全局作用域)，如果全局作用域也没有这个变量，则把该变量定义为全局变量，再进行赋值<strong>（注意：函数名也是作用域中的变量）</strong></li>
</ul>
<h5 id="8-2变量访问机制"><a href="#8-2变量访问机制" class="headerlink" title="8.2变量访问机制"></a>8.2变量访问机制</h5><ul>
<li>自己作用域中没有欲访问的变量的时候，向父级作用域查找，一直到全局作用域都没有，就会报错（xx is not defined)</li>
</ul>
<h4 id="9-预解析-1-x2F-29"><a href="#9-预解析-1-x2F-29" class="headerlink" title="9.预解析   1&#x2F;29"></a>9.预解析   1&#x2F;29</h4><p><strong>写在前头：</strong>预解析作为一种技术点虽然在实际开发中没有具体的功能实现，但有一定的难度，比如var是否书写用来进行变量的声明和直接a&#x3D;b&#x3D;100等方式存在不同的差异，具体差异表现在变量的赋值和访问机制之中，可以作为一个面试的技术点进行学习，也有一定的趣味性。</p>
<h5 id="9-1预解析"><a href="#9-1预解析" class="headerlink" title="9.1预解析**"></a>9.1预解析**</h5><p>在所有代码执行之前，对代码进行通读并解释</p>
<p>预解析的内容（<strong>特点</strong>）:</p>
<p>1.解析了var内容</p>
<ul>
<li>会把var关键字声明的变量进行预解析，但不会进行赋值</li>
</ul>
<p>2.解析声明式函数</p>
<ul>
<li>会把函数名提前声明，并且赋值为一个函数</li>
</ul>
<p>3.if条件为false内部变量和函数也都会预解析，return<strong>后的代码也会预解析</strong></p>
<p>如：</p>
<ol>
<li><p>打开页面</p>
</li>
<li><p>预解析</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num</span><br><span class="line">num = <span class="number">100</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num)</span><br></pre></td></tr></table></figure>

<ul>
<li>第一行代码告诉页面定义了一个num变量，但没有赋值，此时如果打印变量num的是处于undefined</li>
<li>第二行代码已经把num进行了赋值，因此打印的时候num&#x3D;100</li>
</ul>
</li>
</ol>
<h5 id="9-2预解析的重命名问题"><a href="#9-2预解析的重命名问题" class="headerlink" title="9.2预解析的重命名问题"></a>9.2预解析的重命名问题</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">num</span>() </span><br><span class="line"><span class="keyword">var</span> num = <span class="number">100</span> <span class="comment">//</span></span><br><span class="line"><span class="title function_">num</span>()</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">num</span>(<span class="params"></span>)&#123; <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我是num&#x27;</span>) &#125; <span class="comment">//</span></span><br><span class="line"><span class="title function_">num</span>()</span><br></pre></td></tr></table></figure>

<ol>
<li>打开页面</li>
<li>预解析</li>
</ol>
<p>​	&#x3D;&gt; var num 预解析告诉浏览器定义了一个叫做num的变量，但没有赋值</p>
<p>​	&#x3D;&gt; function num() … 预解析告诉浏览器定义了一个叫做num的变量，且num被赋值为函数</p>
<p>​	3. 此时预解析结束，num变量存在，既是一个未赋值且存在的变量（本来该有结果没有—undefined)，又是一个函数。</p>
<ol start="4">
<li><p>代码执行</p>
<p>第一行代码num()	</p>
<p>​	&#x3D;&gt;拿到num的值当做一个函数来调用</p>
<p>​	&#x3D;&gt; 因为预解析阶段，num就是一个函数</p>
<p>​	&#x3D;&gt; 所以正常调用</p>
<p>第二行代码num()</p>
<p>​	&#x3D;&gt;将num变量赋值为100</p>
<p>​	&#x3D;&gt;num此时被覆盖成一个变量，所以不再是一个函数，从此num&#x3D;100</p>
<p>第三行代码num()</p>
<p>​	&#x3D;&gt;<strong>报错：</strong>输出结果num is not a function（因为把数字num当成函数来使用是错误的）</p>
</li>
</ol>
<h4 id="10-对象数据类型"><a href="#10-对象数据类型" class="headerlink" title="10.对象数据类型"></a>10.对象数据类型</h4><h5 id="10-1Object"><a href="#10-1Object" class="headerlink" title="10.1Object"></a>10.1Object</h5><p>js中的一种数据类型， 是一个复杂的数据类型，类似于函数，是一个“盒子”，内部装有一些数据，是键值对的集合</p>
<p>如何创建一个对象？</p>
<ol>
<li>字面量方式创建对象  var obj&#x3D;{ name &#x3D; “张三” }</li>
<li>使用构造函数声明 var obj &#x3D; new Object()</li>
</ol>
<h5 id="10-2对象的基本操作"><a href="#10-2对象的基本操作" class="headerlink" title="10.2对象的基本操作**"></a>10.2对象的基本操作**</h5><p>新声明一个空对象 var obj &#x3D; {}  下方.点运算符均可以用成[]方括号运算符，<strong>对象一定要初始化</strong>！！！</p>
<ol>
<li>增	obj.age &#x3D; 18 </li>
<li>删    delete obj.age</li>
<li>改     obj.age &#x3D; 22</li>
<li>查     console.log(obj.age)</li>
</ol>
<h5 id="10-3两种运算符的区别"><a href="#10-3两种运算符的区别" class="headerlink" title="10.3两种运算符的区别**"></a>10.3两种运算符的区别**</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123; ￥<span class="number">2</span>： <span class="number">200</span> , <span class="number">1</span>： <span class="literal">true</span> , <span class="string">&#x27;font-size&#x27;</span> : 50px &#125;<span class="comment">//在对象中键可以是任意字符，需要注意的是当使用特定字符如&quot;font-size&quot;这类需要加上引号进行使用</span></span><br></pre></td></tr></table></figure>

<p>对象内的键名可以如何书写：</p>
<ol>
<li>符合变量命名规则和规范的</li>
<li>可以是纯数字</li>
<li>可以是特殊字符，但需要在键名中单独用引号包裹</li>
</ol>
<p><strong>总结：</strong>数组关联语法比点语法的泛用性更广，可以适用于如特殊字符、数字等情况，但我们习惯的用法还是点语法。</p>
<h5 id="10-4对象的遍历"><a href="#10-4对象的遍历" class="headerlink" title="10.4对象的遍历"></a>10.4对象的遍历</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">for(var key in obj)&#123; console.log(obj[key]) &#125;//有多少个键值对就循环多少次，只能用数组关联语法来取值</span><br></pre></td></tr></table></figure>

<h5 id="10-5数据类型存储上的区别"><a href="#10-5数据类型存储上的区别" class="headerlink" title="10.5数据类型存储上的区别**"></a>10.5数据类型存储上的区别**</h5><p>首先数据类型在存储上有栈内存和堆内存进行存储，两者都是用来存储代码中的数据的位置，<strong>基本数据类型和复杂数据类型在存储上有区别</strong>，栈内存是有序存储，先声明的数据在栈顶，<strong>后进先出原则</strong>，堆内存是无序存储，靠地址来进行变量的查找。</p>
<ol>
<li>基本数据类型<ul>
<li>直接存储在<strong>栈内存</strong>中</li>
</ul>
</li>
<li>复杂数据类型<ul>
<li>数据存储在<strong>堆内存</strong>中，把地址赋值给<strong>栈内存的变量里</strong>，通过引用的方式进行值的读取（因为我们无法直接读取堆内存）</li>
</ul>
</li>
</ol>
<p><img src="/develop/imgs/image-20230129163150862.png" alt="image-20230129163150862"></p>
<h5 id="10-6数据类型赋值上的区别"><a href="#10-6数据类型赋值上的区别" class="headerlink" title="10.6数据类型赋值上的区别"></a>10.6数据类型赋值上的区别</h5><ol>
<li>基本数据类型的赋值是把值直接给到另一个基本数据类型，两个基本数据如果赋予的是相同的值，那么比较的结果为true**(总结:基本数据类型的比较是值与值之间的比较)**</li>
<li><strong>复杂数据类型（对象–object  函数–function）</strong>的比较是<strong>地址与地址之间的比较</strong></li>
</ol>
<h4 id="11-排序-1-x2F-30"><a href="#11-排序-1-x2F-30" class="headerlink" title="11.排序 1&#x2F;30"></a>11.排序 1&#x2F;30</h4><p>冒泡与选择排序</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">		<span class="comment">//冒泡排序，一个个逐次交换</span></span><br><span class="line">		<span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">9</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">6</span>, <span class="number">7</span>]</span><br><span class="line">		<span class="keyword">function</span> <span class="title function_">MaoPao_sort</span>(<span class="params"></span>) &#123;</span><br><span class="line">			<span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">				<span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>; j &lt; arr.<span class="property">length</span> - <span class="number">1</span> - i; j++) &#123;</span><br><span class="line">					<span class="keyword">if</span> (arr[j] &gt; arr[j + <span class="number">1</span>]) &#123;</span><br><span class="line">						<span class="keyword">var</span> temp = arr[j]</span><br><span class="line">						arr[j] = arr[j + <span class="number">1</span>]</span><br><span class="line">						arr[j + <span class="number">1</span>] = temp</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">			<span class="comment">//console.log(arr)</span></span><br><span class="line">		&#125;</span><br><span class="line">		<span class="title class_">MaoPao</span>_sort()</span><br><span class="line">		<span class="comment">//选择排序，先选定一个当参考，然后跟其它的元素一一判断，如果是最小就放到它自己的位置上</span></span><br><span class="line">		<span class="keyword">function</span> <span class="title function_">Select_sort</span>(<span class="params"></span>) &#123;</span><br><span class="line">			<span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>; j &lt; arr.<span class="property">length</span> - <span class="number">1</span>; j++) &#123;</span><br><span class="line">				<span class="keyword">var</span> minIndex = j</span><br><span class="line">				<span class="keyword">for</span> (<span class="keyword">var</span> i = j; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">					<span class="keyword">if</span> (arr[minIndex] &gt; arr[i]) &#123;</span><br><span class="line">						minIndex = i</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">				<span class="keyword">var</span> temp = arr[j]</span><br><span class="line">				arr[j] = arr[minIndex]</span><br><span class="line">				arr[minIndex] = temp</span><br><span class="line">			&#125;</span><br><span class="line">			<span class="variable language_">console</span>.<span class="title function_">log</span>(arr)</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="title class_">Select</span>_sort()</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<h4 id="12-数组常用方法"><a href="#12-数组常用方法" class="headerlink" title="12.数组常用方法"></a>12.数组常用方法</h4><h5 id="12-1数组-push"><a href="#12-1数组-push" class="headerlink" title="12.1数组.push()"></a>12.1数组.push()</h5><p>作用：向数组末尾追加数据</p>
<h5 id="12-2数组-pop"><a href="#12-2数组-pop" class="headerlink" title="12.2数组.pop()"></a>12.2数组.pop()</h5><p>作用：从数组末尾删除数据</p>
<h5 id="12-3数组-unshift"><a href="#12-3数组-unshift" class="headerlink" title="12.3数组.unshift()"></a>12.3数组.unshift()</h5><p>作用：从数组最前面添加一个新的数据</p>
<h5 id="12-4数组-shift"><a href="#12-4数组-shift" class="headerlink" title="12.4数组.shift()"></a>12.4数组.shift()</h5><p>作用：删除数组最前面的一个数据</p>
<h5 id="12-5数组-reserve"><a href="#12-5数组-reserve" class="headerlink" title="12.5数组.reserve()"></a>12.5数组.reserve()</h5><p>作用：反转数组</p>
<h5 id="12-6数组-sort"><a href="#12-6数组-sort" class="headerlink" title="12.6数组.sort()"></a>12.6数组.sort()</h5><p>作用：把数据每一个数据一位位看待，进行排列</p>
<p>如：var arr &#x3D; [1,12,20,23,3,32,5]</p>
<h5 id="12-7数组-sort-function-a-b-return-a-b"><a href="#12-7数组-sort-function-a-b-return-a-b" class="headerlink" title="12.7数组.sort(function(a,b){return a-b})"></a>12.7数组.sort(function(a,b){return a-b})</h5><p>作用：把所有数据进行升序排列</p>
<h5 id="12-8数组-sort-function-a-b-return-a-b"><a href="#12-8数组-sort-function-a-b-return-a-b" class="headerlink" title="12.8数组.sort(function(a,b){return a-b})"></a>12.8数组.sort(function(a,b){return a-b})</h5><p>作用：把所有数据进行降序排列</p>
<h5 id="12-9数组-splice-开始的索引，截取的数量"><a href="#12-9数组-splice-开始的索引，截取的数量" class="headerlink" title="12.9数组.splice(开始的索引，截取的数量)"></a>12.9数组.splice(开始的索引，截取的数量)</h5><p>作用：截取数组并选择性是否插入内容</p>
<h5 id="12-10数组-concat-数据"><a href="#12-10数组-concat-数据" class="headerlink" title="12.10数组.concat(数据)"></a>12.10数组.concat(数据)</h5><p>作用：链接多个数据，意思是数据可以是单个也可以是数组，不改变原有数组本身，通过返回值获取</p>
<h5 id="12-11数组-join-‘连接符’"><a href="#12-11数组-join-‘连接符’" class="headerlink" title="12.11数组.join(‘连接符’)"></a>12.11数组.join(‘连接符’)</h5><p>作用：链接数组的字符，不填默认是逗号，返回值是string</p>
<h5 id="12-12数组-slice-开始索引，结束索引"><a href="#12-12数组-slice-开始索引，结束索引" class="headerlink" title="12.12数组.slice(开始索引，结束索引)"></a>12.12数组.slice(开始索引，结束索引)</h5><p>开始索引默认是0，结束索引默认是length，可以填写负数，表示倒数第几个</p>
<p>作用：截取数组，返回值是截取下来的新数组</p>
<h5 id="12-13数组-indexOf-数据，开始索引"><a href="#12-13数组-indexOf-数据，开始索引" class="headerlink" title="12.13数组.indexOf(数据，开始索引)"></a>12.13数组.indexOf(数据，开始索引)</h5><p>作用：从开始索引向后检索该数组中是否有该数据，如果存在则返回第一次出现的索引位置，如果不存在返回-1</p>
<h5 id="12-14数组-forEach-item-index-arr-x3D-gt"><a href="#12-14数组-forEach-item-index-arr-x3D-gt" class="headerlink" title="12.14数组.forEach((item,index,arr)&#x3D;&gt;{})"></a>12.14数组.forEach((item,index,arr)&#x3D;&gt;{})</h5><p>作用：遍历数组，item为数组的每一项，index为数组的索引，arr为原数组</p>
<h5 id="12-15数组-map-item-index-arr-x3D-gt-return-item-10"><a href="#12-15数组-map-item-index-arr-x3D-gt-return-item-10" class="headerlink" title="12.15数组.map((item,index,arr)&#x3D;&gt;{return item*10})"></a>12.15数组.map((item,index,arr)&#x3D;&gt;{return item*10})</h5><p>作用：映射数组，返回值是一个新数组，并且与原始数组的长度一致，新数组内的每一个数据都是根据原始数组的每一个数据映射出来的，映射条件以return的形式书写</p>
<h5 id="12-16数组-filter-x3D-gt-return-item-gt-10"><a href="#12-16数组-filter-x3D-gt-return-item-gt-10" class="headerlink" title="12.16数组.filter(()&#x3D;&gt;{return item&gt;10})"></a>12.16数组.filter(()&#x3D;&gt;{return item&gt;10})</h5><p>作用：过滤数组，返回值是一个新数组，新数组内的每一个数据是根据原始数组的每一个数据的条件得出，条件以return的形式书写</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//剔除已经支付过的商品(every和filter的综合利用，剔除重复数组)</span></span><br><span class="line">                  app.<span class="property">globalData</span>.<span class="property">cartList</span> = app.<span class="property">globalData</span>.<span class="property">cartList</span>.<span class="title function_">filter</span>(<span class="function">(<span class="params">itemA,index</span>) =&gt;</span> &#123;</span><br><span class="line">                   <span class="keyword">return</span> app.<span class="property">globalData</span>.<span class="property">orderList</span>.<span class="title function_">every</span>(<span class="function"><span class="params">itemB</span> =&gt;</span> &#123;</span><br><span class="line">                     <span class="keyword">return</span> itemB.<span class="property">name</span> !== itemA.<span class="property">name</span> ?<span class="string">&#x27;&#x27;</span>:(app.<span class="property">globalData</span>.<span class="property">checkedList</span>.<span class="title function_">splice</span>(index,<span class="number">1</span>),</span><br><span class="line">                     app.<span class="property">globalData</span>.<span class="property">goodsNumber</span>.<span class="title function_">splice</span>(index,<span class="number">1</span>))</span><br><span class="line">                   &#125;)</span><br><span class="line">                 &#125;)</span><br><span class="line">                   <span class="variable language_">console</span>.<span class="title function_">log</span>(app.<span class="property">globalData</span>.<span class="property">goodsNumber</span>)</span><br><span class="line">                   <span class="variable language_">console</span>.<span class="title function_">log</span>(app.<span class="property">globalData</span>.<span class="property">checkedList</span>)</span><br><span class="line">                   <span class="variable language_">console</span>.<span class="title function_">log</span>(app.<span class="property">globalData</span>.<span class="property">cartList</span>)</span><br><span class="line">                   <span class="comment">//更细本地存储</span></span><br><span class="line">                   wx.<span class="title function_">setStorageSync</span>(<span class="string">&#x27;goodsNumber&#x27;</span>, app.<span class="property">globalData</span>.<span class="property">goodsNumber</span>)</span><br><span class="line">                   wx.<span class="title function_">setStorageSync</span>(<span class="string">&#x27;cartList&#x27;</span>, app.<span class="property">globalData</span>.<span class="property">cartList</span>)</span><br><span class="line">                   wx.<span class="title function_">setStorageSync</span>(<span class="string">&#x27;checkedList&#x27;</span>, app.<span class="property">globalData</span>.<span class="property">checkedList</span>)</span><br></pre></td></tr></table></figure>



<h5 id="12-17数组-every-item-index-arr-x3D-gt-数组-some-item-index-arr-x3D-gt"><a href="#12-17数组-every-item-index-arr-x3D-gt-数组-some-item-index-arr-x3D-gt" class="headerlink" title="12.17数组.every((item,index,arr)&#x3D;&gt;{}) || 数组.some((item,index,arr)&#x3D;&gt;{})"></a>12.17数组.every((item,index,arr)&#x3D;&gt;{}) || 数组.some((item,index,arr)&#x3D;&gt;{})</h5><p>作用：判断数组是否全部满足条件或者是否部分满足条件，返回值是true&#x2F;false</p>
<h5 id="12-18数组-reduce-prev-item-index-arr-x3D-gt"><a href="#12-18数组-reduce-prev-item-index-arr-x3D-gt" class="headerlink" title="12.18数组.reduce((prev,item,index,arr)&#x3D;&gt;{})"></a>12.18数组.reduce((prev,item,index,arr)&#x3D;&gt;{})</h5><p>作用：进行叠加，prev的值是基本值，在return中写入执行语句</p>
<h5 id="12-19数组塌陷—出现在数组中删除数据的时候-1-x2F-31"><a href="#12-19数组塌陷—出现在数组中删除数据的时候-1-x2F-31" class="headerlink" title="12.19数组塌陷—出现在数组中删除数据的时候 1&#x2F;31"></a>12.19数组塌陷—出现在数组中删除数据的时候 1&#x2F;31</h5><p>当使用数组.splice(i,1)的时候，i由于在for循环中会自增，而数组对应位置的元素被删除之后数组的长度和原本对应元素的索引也在变化，因此在删除的时候会按自增长度隔着删除，此时可以添加<strong>i-&#x3D;自增长度</strong>在splice下方，让自增平衡。</p>
<h4 id="13-数组去重"><a href="#13-数组去重" class="headerlink" title="13.数组去重"></a>13.数组去重</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方案1：利用indexof函数，同时注意要i--，否则还是会存在重复的数据</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">5</span>, <span class="number">4</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">1</span>, <span class="number">5</span>, <span class="number">4</span>, <span class="number">3</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">5</span>]</span><br><span class="line">arr.<span class="title function_">sort</span>()</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">	<span class="keyword">var</span> index = arr.<span class="title function_">indexOf</span>(arr[i], i + <span class="number">1</span>)</span><br><span class="line">	<span class="keyword">if</span> (index !== -<span class="number">1</span>) &#123;</span><br><span class="line">		arr.<span class="title function_">splice</span>(index,<span class="number">1</span>)</span><br><span class="line">		i--</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr)</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方案2：利用set集合可以自动去除重复数据，但set集合最后出来的是个对象，因此要用array.from把对象转成数组</span></span><br><span class="line"><span class="keyword">var</span> set = <span class="keyword">new</span> <span class="title class_">Set</span>(arr)</span><br><span class="line"><span class="keyword">var</span> res = <span class="title class_">Array</span>.<span class="title function_">from</span>(set)</span><br><span class="line">or</span><br><span class="line"><span class="keyword">var</span> res = [...<span class="keyword">new</span> <span class="title class_">Set</span>(arr)] <span class="comment">//其中‘...’为展开运算符</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res)		</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方案3：利用indexof和一个新数组，判断新数组中是否存在当前遍历的项，如果不存在，则加入新数组中</span></span><br><span class="line"><span class="keyword">var</span> newArray = []</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>;i &lt; arr.<span class="property">length</span>;i++)&#123;</span><br><span class="line">	<span class="keyword">if</span>(newArray.<span class="title function_">indexOf</span>(arr[i]) == -<span class="number">1</span>)&#123;</span><br><span class="line">		newArray.<span class="title function_">push</span>(arr[i])</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(newArray)</span><br></pre></td></tr></table></figure>

<h4 id="14-字符集"><a href="#14-字符集" class="headerlink" title="14.字符集"></a>14.字符集</h4><p>ASCII码：美国人发明，128个字符</p>
<p>unicode：包括128个字符已经各国家的编码方式，全世界通用</p>
<p>gbk：中国自己的编码，128个之后就是中文</p>
<h4 id="15-字符串常用方法"><a href="#15-字符串常用方法" class="headerlink" title="15.字符串常用方法"></a>15.字符串常用方法</h4><h5 id="15-1字符串-replace-‘换下字符’-’换上字符’"><a href="#15-1字符串-replace-‘换下字符’-’换上字符’" class="headerlink" title="15.1字符串.replace(‘换下字符’,’换上字符’)"></a>15.1字符串.replace(‘换下字符’,’换上字符’)</h5><h5 id="15-2字符串-split-‘切割符号’"><a href="#15-2字符串-split-‘切割符号’" class="headerlink" title="15.2字符串.split(‘切割符号’)"></a>15.2字符串.split(‘切割符号’)</h5><p>作用：字符串切割,返回值是数组</p>
<h5 id="15-3任务：替换敏感词"><a href="#15-3任务：替换敏感词" class="headerlink" title="15.3任务：替换敏感词"></a>15.3任务：替换敏感词</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方案1</span></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;dadFFfsdfefgFrhgGGFFBghgrFF&#x27;</span></span><br><span class="line"><span class="keyword">while</span>(str.<span class="title function_">indexOf</span>(<span class="string">&#x27;FF&#x27;</span>) !== -<span class="number">1</span>)</span><br><span class="line">	str = str.<span class="title function_">replace</span>(<span class="string">&#x27;FF&#x27;</span>,<span class="string">&#x27;**&#x27;</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str)</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方案2</span></span><br><span class="line">str = str.<span class="title function_">split</span>(<span class="string">&#x27;FF&#x27;</span>).<span class="title function_">join</span>(<span class="string">&#x27;**&#x27;</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str)</span><br></pre></td></tr></table></figure>

<h4 id="16-查询字符串-2-x2F-1"><a href="#16-查询字符串-2-x2F-1" class="headerlink" title="16.查询字符串 2&#x2F;1"></a>16.查询字符串 2&#x2F;1</h4><p>查询字符串 - queryString</p>
<p>把被引号包裹的内容叫做字符串，因为字符串填充的内容不一样，因此做了一些细分</p>
<ul>
<li><p>数字字符串 &#x3D;&gt;全部由数字组成字符串 如：’123456798’</p>
</li>
<li><p>html格式字符串 &#x3D;&gt;带有html格式的字符串 如：’<p>abcd</p>‘</p>
</li>
<li><p>查询字符串格式 &#x3D;&gt;key&#x3D;value&amp;key&#x3D;value 如：’name&#x3D;zhangsan&amp;password&#x3D;123456&amp;gender&#x3D;man’</p>
</li>
</ul>
<h5 id="16-1把对象转换成查询字符串（为了把前端得到的数据给后端使用）"><a href="#16-1把对象转换成查询字符串（为了把前端得到的数据给后端使用）" class="headerlink" title="16.1把对象转换成查询字符串（为了把前端得到的数据给后端使用）"></a>16.1把对象转换成查询字符串（为了把前端得到的数据给后端使用）</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;<span class="attr">name</span>:<span class="string">&#x27;uni&#x27;</span>,<span class="attr">age</span>:<span class="number">12</span>,<span class="attr">gender</span>:<span class="string">&#x27;man&#x27;</span>&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">queryStringify</span>(<span class="params">obj</span>)&#123;</span><br><span class="line">	<span class="keyword">var</span> str = <span class="string">&#x27;&#x27;</span></span><br><span class="line">	<span class="keyword">for</span>(<span class="keyword">var</span> i <span class="keyword">in</span> obj)&#123;</span><br><span class="line">		str += i + <span class="string">&#x27;=&#x27;</span> + obj[i] + <span class="string">&#x27;&amp;&#x27;</span><span class="comment">//注意这里是对象的key值操作，不是数组的索引操作</span></span><br><span class="line">	&#125;</span><br><span class="line">		str = str.<span class="title function_">slice</span>(<span class="number">0</span>,-<span class="number">1</span>)</span><br><span class="line">		<span class="keyword">return</span> str</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">queryStringify</span>(obj))</span><br></pre></td></tr></table></figure>

<h5 id="16-2把查询字符串转成对象（为了后端的数据传到前端）"><a href="#16-2把查询字符串转成对象（为了后端的数据传到前端）" class="headerlink" title="16.2把查询字符串转成对象（为了后端的数据传到前端）"></a>16.2把查询字符串转成对象（为了后端的数据传到前端）</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;name=uni&amp;age=12&amp;gender=man&#x27;</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">parseQueryString</span>(<span class="params">str</span>)&#123;</span><br><span class="line">	<span class="keyword">var</span> arr = str.<span class="title function_">split</span>(<span class="string">&#x27;&amp;&#x27;</span>),obj = &#123;&#125;</span><br><span class="line">	arr.<span class="title function_">forEach</span>(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;</span><br><span class="line">		<span class="keyword">var</span> t = item.<span class="title function_">split</span>(<span class="string">&#x27;=&#x27;</span>)</span><br><span class="line">		<span class="keyword">var</span> key = t[<span class="number">0</span>]</span><br><span class="line">		<span class="keyword">var</span> value = t[<span class="number">1</span>]</span><br><span class="line">		obj[key] = value</span><br><span class="line">	&#125;)</span><br><span class="line">	<span class="keyword">return</span> obj</span><br><span class="line">&#125;			</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">parseQueryString</span>(str))</span><br></pre></td></tr></table></figure>

<h4 id="17-json格式字符串"><a href="#17-json格式字符串" class="headerlink" title="17.json格式字符串"></a>17.json格式字符串</h4><p>key和value必须用双引号包裹，数字和布尔值可以不用，json格式的出现是为了前后端之间语言能通用</p>
<ol>
<li><p>js转成json格式</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123; <span class="attr">name</span>: <span class="string">&#x27;Jack&#x27;</span>, <span class="attr">age</span>: <span class="number">18</span>,<span class="attr">gender</span>: <span class="string">&#x27;man&#x27;</span>&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj)<span class="comment">//此时obj是js对象</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> str = <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str)<span class="comment">//这里已经变成了json格式&quot;字符串&quot;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>json格式转换成js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;&#123;&quot;name&quot;:&quot;Jack&quot;,&quot;age&quot;:18,&quot;gender&quot;:&quot;man&#125;&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str)</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(str)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj)</span><br></pre></td></tr></table></figure></li>
</ol>
<h4 id="18-操作数字的方法"><a href="#18-操作数字的方法" class="headerlink" title="18.操作数字的方法"></a>18.操作数字的方法</h4><p>Math.方法()</p>
<h4 id="19-时间对象"><a href="#19-时间对象" class="headerlink" title="19.时间对象"></a>19.时间对象</h4><p>var time &#x3D; new Date() 可以获取当前终端的时间信息，方法可以传递数字或者字符串(“yyyy-mm-dd hh:mm:ss”)</p>
<h5 id="19-1time-getTime"><a href="#19-1time-getTime" class="headerlink" title="19.1time.getTime()"></a>19.1time.getTime()</h5><p>作用：获取时间戳，得到的是从1970&#x2F;1&#x2F;1 0:0:0的时间开始到现在的毫秒数</p>
<h5 id="19-2时间格式化案例-2-x2F-2"><a href="#19-2时间格式化案例-2-x2F-2" class="headerlink" title="19.2时间格式化案例 2&#x2F;2"></a>19.2时间格式化案例 2&#x2F;2</h5><p>这个案例使用之前所提到的单独获取年月日等具体时间并巧妙的利用<strong>字符串</strong>与数组的相似性，采用索引的方法来拼接字符串，把星期几的信息进行了拼接，简化了编码方式。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> time = <span class="keyword">new</span> <span class="title class_">Date</span>()</span><br><span class="line"><span class="keyword">var</span> year =  time.<span class="title function_">getFullYear</span>()</span><br><span class="line"><span class="keyword">var</span> month = time.<span class="title function_">getMonth</span>()</span><br><span class="line"><span class="keyword">var</span> date = time.<span class="title function_">getDate</span>()</span><br><span class="line"><span class="keyword">var</span> hours = time.<span class="title function_">getHours</span>()</span><br><span class="line"><span class="keyword">var</span> minutes = time.<span class="title function_">getMinutes</span>()</span><br><span class="line"><span class="keyword">var</span> seconds = time.<span class="title function_">getSeconds</span>()</span><br><span class="line"><span class="keyword">var</span> day = time.<span class="title function_">getDay</span>()</span><br><span class="line"></span><br><span class="line">month += <span class="number">1</span></span><br><span class="line"><span class="keyword">var</span> str = hours &gt;= <span class="number">13</span> <span class="string">&#x27;下午&#x27;</span>:<span class="string">&#x27;上午&#x27;</span></span><br><span class="line">hours %= <span class="number">12</span></span><br><span class="line"><span class="keyword">var</span> s = <span class="string">&#x27;日一二三四五六&#x27;</span> <span class="comment">//巧妙运用数组的关系</span></span><br><span class="line"><span class="keyword">var</span> week = <span class="string">&#x27;星期&#x27;</span> + s[day]</span><br><span class="line"><span class="keyword">var</span> res = year + <span class="string">&#x27;年&#x27;</span> + month + <span class="string">&#x27;月&#x27;</span> + date + <span class="string">&#x27;日&#x27;</span> + str + <span class="string">&#x27; &#x27;</span> + hours + <span class="string">&#x27;时&#x27;</span> + minutes + <span class="string">&#x27;分&#x27;</span> + seconds + <span class="string">&#x27;秒&#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res)</span><br></pre></td></tr></table></figure>

<h5 id="19-3时间差案例"><a href="#19-3时间差案例" class="headerlink" title="19.3时间差案例"></a>19.3时间差案例</h5><p>这个案例把前面所学进行了总结，把天数，小时，分钟等利用除数和余数进行了分离，最后在return处返回了一个<strong>对象模型</strong>，是为了让接收的人可以清楚数据对应的类别。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> target = <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="number">2023</span>,<span class="number">1</span>,<span class="number">4</span>,<span class="number">18</span>,<span class="number">0</span>,<span class="number">0</span>) </span><br><span class="line"><span class="keyword">var</span> current = <span class="keyword">new</span> <span class="title class_">Date</span>()</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">time_diff</span>(<span class="params">current,target</span>)&#123;</span><br><span class="line">	<span class="keyword">var</span> time = <span class="title class_">Math</span>.<span class="title function_">ceil</span>((target.<span class="title function_">getTime</span>() - current.<span class="title function_">getTime</span>()) / <span class="number">1000</span>)</span><br><span class="line">	</span><br><span class="line">	<span class="keyword">var</span> day = <span class="title class_">Math</span>.<span class="title function_">floor</span>(time / (<span class="number">60</span> * <span class="number">60</span> * <span class="number">24</span>))</span><br><span class="line">	<span class="keyword">var</span> hour = <span class="title class_">Math</span>.<span class="title function_">floor</span>(time % (<span class="number">60</span> * <span class="number">60</span> * <span class="number">24</span>) / (<span class="number">60</span> * <span class="number">60</span>))</span><br><span class="line">	<span class="keyword">var</span> minutes = <span class="title class_">Math</span>.<span class="title function_">floor</span>(time % (<span class="number">60</span> * <span class="number">60</span>) / <span class="number">60</span>)</span><br><span class="line">	<span class="keyword">var</span> seconds = time % <span class="number">60</span></span><br><span class="line">	<span class="keyword">return</span>&#123;</span><br><span class="line">		<span class="attr">day</span>: day,</span><br><span class="line">		<span class="attr">hour</span>: hour,</span><br><span class="line">		<span class="attr">minutes</span>: minutes,</span><br><span class="line">		<span class="attr">seconds</span>: seconds</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="19-4定时器"><a href="#19-4定时器" class="headerlink" title="19.4定时器"></a>19.4定时器</h5><ol>
<li>setTimeout(()&#x3D;&gt;{},1000) &#x3D;&gt;等待1秒后执行，返回值是定时器编号</li>
<li>setInterval(()&#x3D;&gt;{},1000) &#x3D;&gt;每一秒执行一次，返回值是定时器编号</li>
<li>clearInterval(数字)&#x2F;clearTimeout(数字)  &#x3D;&gt;根据定时器编号关闭定时器</li>
</ol>
<h5 id="19-5js的异步代码执行机制"><a href="#19-5js的异步代码执行机制" class="headerlink" title="19.5js的异步代码执行机制"></a>19.5js的异步代码执行机制</h5><p>js的异步代码执行机制</p>
<p>因为js语言是一个单线程的代码，同时只能做一个事情，所以js提供了一个<strong>异步代码执行机制 &#x3D;&gt;定时器</strong></p>
<p>java,python等是多线程语言</p>
<p><strong>同步</strong>：从上到下依次执行，上一行没有执行完毕，下一行不会开始</p>
<p><strong>异步</strong>：当js遇到异步代码的时候，会先拿出来，放在异步队列等待，暂时不执行，等到所有同步代码执行完毕，才在异步队列中按从前往后的顺序依次执行。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;1&#x27;</span>)</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;2&#x27;</span>)&#125;,<span class="number">0</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;3&#x27;</span>)</span><br><span class="line"></span><br><span class="line">这里的输出结果为<span class="number">1</span>，<span class="number">3</span>，<span class="number">2</span>因为<span class="number">2</span>在其中是异步代码，所以等两个同步代码执行完成才会执行第二行的代码。</span><br></pre></td></tr></table></figure>

<h5 id="19-6倒计时案例"><a href="#19-6倒计时案例" class="headerlink" title="19.6倒计时案例"></a>19.6倒计时案例</h5><p>一种简单的前后端分离且交互的案例</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;span id=<span class="string">&quot;day&quot;</span>&gt;<span class="number">0</span>&lt;/span&gt; 天</span><br><span class="line">&lt;span id=<span class="string">&quot;hour&quot;</span>&gt;<span class="number">0</span>&lt;/span&gt; 小时</span><br><span class="line">&lt;span id=<span class="string">&quot;minutes&quot;</span>&gt;<span class="number">0</span>&lt;/span&gt; 分</span><br><span class="line">&lt;span id=<span class="string">&quot;seconds&quot;</span>&gt;<span class="number">0</span>&lt;/span&gt; 秒</span><br><span class="line"></span><br><span class="line"><span class="built_in">setInterval</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> time = <span class="title function_">time_diff</span>(current,target)</span><br><span class="line">	<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;day&#x27;</span>).<span class="property">innerText</span> = time.<span class="property">day</span></span><br><span class="line">	<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;hour&#x27;</span>).<span class="property">innerText</span> = time.<span class="property">hour</span></span><br><span class="line">	<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;minutes&#x27;</span>).<span class="property">innerText</span> = time.<span class="property">minutes</span></span><br><span class="line">	<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;seconds&#x27;</span>).<span class="property">innerText</span> = time.<span class="property">seconds</span></span><br><span class="line">	<span class="comment">//console.log(day)</span></span><br><span class="line">&#125;,<span class="number">1000</span>)</span><br></pre></td></tr></table></figure>

<h4 id="20-认识BOM模型-2-x2F-3"><a href="#20-认识BOM模型-2-x2F-3" class="headerlink" title="20.认识BOM模型  2&#x2F;3"></a>20.认识BOM模型  2&#x2F;3</h4><p>BOM： Browser Object Model 浏览器对象模型</p>
<p>bom自己有一套操作浏览器的属性和方法，是浏览器厂商自己提供的一套规则，浏览器的最顶层为window，和bom相关的内容都是window.xxx，在书写的时候都可以省略window。</p>
<p>js是通过代码来控制浏览器的动作：</p>
<ul>
<li>操作浏览器的滚动条</li>
<li>操作浏览器的历史记录</li>
<li>操作浏览器的窗口尺寸</li>
<li>…..</li>
</ul>
<h5 id="20-1浏览器的窗口尺寸"><a href="#20-1浏览器的窗口尺寸" class="headerlink" title="20.1浏览器的窗口尺寸"></a>20.1浏览器的窗口尺寸</h5><p>获取浏览器的<strong>可视窗口</strong>宽度和高度，获取到的尺寸是包含滚动条在内的尺寸：</p>
<ol>
<li>window.innerWidth</li>
<li>window.innerHeight</li>
</ol>
<h5 id="20-2浏览器的地址栏"><a href="#20-2浏览器的地址栏" class="headerlink" title="20.2浏览器的地址栏"></a>20.2浏览器的地址栏</h5><p>window.location.href</p>
<p>作用：得到地址栏当前地址，同时地址可以修改，修改后会跳转到对应的网址</p>
<h5 id="20-3打开新的标签页"><a href="#20-3打开新的标签页" class="headerlink" title="20.3打开新的标签页"></a>20.3打开新的标签页</h5><p>window.open(‘<a target="_blank" rel="noopener" href="http://www.baidu.com/">www.baidu.com</a>‘)</p>
<h5 id="20-4浏览器卷去的尺寸"><a href="#20-4浏览器卷去的尺寸" class="headerlink" title="20.4浏览器卷去的尺寸"></a>20.4浏览器卷去的尺寸</h5><p>document.documentElement.scrollTop 当页面有&lt;!DOCTYPE&gt;标签时使用</p>
<p>document.body.scrollLeft 当页面没有&lt;!DOCTYPE&gt;标签时使用</p>
<p>所以为了兼容，可以使用<strong>短路表达式</strong>: </p>
<p>var scrollTop &#x3D; document.documentElement.scrollTop || document.body.scrollLeft</p>
<h5 id="20-5BOM实例"><a href="#20-5BOM实例" class="headerlink" title="20.5BOM实例"></a>20.5BOM实例</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">window</span>.<span class="property">onscroll</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">	<span class="keyword">var</span> scrollTop = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">scrollTop</span> || <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">scrollTop</span></span><br><span class="line">	<span class="keyword">if</span>(scrollTop &gt;= <span class="number">300</span>)&#123;</span><br><span class="line">		<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;能看到&#x27;</span>)</span><br><span class="line">		<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;header&#x27;</span>).<span class="property">style</span>.<span class="property">top</span> = <span class="number">0</span></span><br><span class="line">		<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;go&#x27;</span>).<span class="property">style</span>.<span class="property">display</span> = <span class="string">&#x27;block&#x27;</span></span><br><span class="line">	&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">		<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;header&#x27;</span>).<span class="property">style</span>.<span class="property">top</span> = <span class="string">&#x27;-60px&#x27;</span></span><br><span class="line">		<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;go&#x27;</span>).<span class="property">style</span>.<span class="property">display</span> = <span class="string">&#x27;none&#x27;</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line">go.<span class="property">onclick</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">	<span class="variable language_">window</span>.<span class="title function_">scrollTo</span>(&#123;</span><br><span class="line">		<span class="attr">top</span>: <span class="number">0</span>,</span><br><span class="line">		<span class="attr">behavior</span>: <span class="string">&#x27;smooth&#x27;</span></span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;header&quot;</span>&gt;</span>顶部通栏<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;go&quot;</span>&gt;</span>回到顶部<span class="tag">&lt;/<span class="name">div</span>&gt;</span> 	</span><br></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">*&#123;</span><br><span class="line">	<span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">	<span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#header</span>&#123;</span><br><span class="line">	<span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">	<span class="attribute">height</span>: <span class="number">60px</span>;</span><br><span class="line">	<span class="attribute">display</span>: flex;</span><br><span class="line">	<span class="attribute">justify-content</span>: center;</span><br><span class="line">	<span class="attribute">align-items</span>: center;</span><br><span class="line">	<span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">	<span class="attribute">background-color</span>: skyblue;</span><br><span class="line">	<span class="attribute">font-size</span>: <span class="number">40px</span>;</span><br><span class="line">	<span class="attribute">position</span>: fixed;</span><br><span class="line">	<span class="attribute">top</span>:-<span class="number">60px</span>;</span><br><span class="line">	<span class="attribute">left</span>:<span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#go</span>&#123;</span><br><span class="line">	<span class="attribute">width</span>: <span class="number">50px</span>;</span><br><span class="line">	<span class="attribute">height</span>: <span class="number">50px</span>;</span><br><span class="line">	<span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">	<span class="attribute">line-height</span>: <span class="number">25px</span>;</span><br><span class="line">	<span class="attribute">text-align</span>: center;</span><br><span class="line">	<span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">	<span class="attribute">background-color</span>: pink;</span><br><span class="line">	<span class="attribute">position</span>: fixed;</span><br><span class="line">	<span class="attribute">bottom</span>: <span class="number">30px</span>;</span><br><span class="line">	<span class="attribute">right</span>: <span class="number">30px</span>;</span><br><span class="line">	<span class="attribute">cursor</span>: pointer;</span><br><span class="line">	</span><br><span class="line">	<span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="21-DOM模型"><a href="#21-DOM模型" class="headerlink" title="21.DOM模型"></a>21.DOM模型</h4><h5 id="21-1DOM的介绍"><a href="#21-1DOM的介绍" class="headerlink" title="21.1DOM的介绍"></a>21.1DOM的介绍</h5><p>Document Objecet Model 文档对象模型</p>
<p>操作文档的一些能力</p>
<ul>
<li>操作html元素（增删改查）</li>
<li>操作元素的样式</li>
<li>操作元素的属性</li>
<li>操作元素添加事件</li>
</ul>
<p>DOM以树状结构出现的</p>
<ul>
<li>顶层是document</li>
<li>最大的标签是html</li>
<li>下面分成head和body</li>
<li>body下面就是一些元素标签</li>
<li>操作DOM就是对这个树上</li>
</ul>
<h5 id="21-2获取元素"><a href="#21-2获取元素" class="headerlink" title="21.2获取元素"></a>21.2获取元素</h5><p>document.getElementById(‘id名称’)</p>
<p>作用：根据id获取元素，如果页面有对应元素，那么就是这个元素，没有就返回null</p>
<p>document.getElementsByClassName(‘class名称’)</p>
<p>作用：根据类名获取元素，返回值必然是一个<strong>伪数组</strong>（没有数组的功能，但是由多个元素组合而成，可以使用forEach方法，但不能使用push方法向其中添加数据），如果页面上有与类名相同的元素，则有多少返回多少，且返回一个伪数组，如果没有返回一个空数组。</p>
<p>document.getElementsByTagName(‘标签名’)</p>
<p>作用：根据标签名获取元素，同样是一个<strong>伪数组</strong>，返回结果同上。</p>
<p>document.getElementsByName(‘name属性’)</p>
<p>作用：根据name属性来获取元素，若标签有name元素，如input，返回的也是<strong>伪数组</strong>，返回结果同上。</p>
<p>document.querySelector(‘选择器’)</p>
<p>作用：根据选择器获取一个元素，如果有多个元素满足条件，则返回第一个，选择器有类选择器，id选择器，标签选择器等。</p>
<p>document.querySelectorAll(‘选择器’)</p>
<p>作用：根据选择器获取一组元素，结果还是<strong>伪数组</strong>，同上。</p>
<h4 id="22-操作元素内容"><a href="#22-操作元素内容" class="headerlink" title="22.操作元素内容"></a>22.操作元素内容</h4><ol>
<li>innerHTML–可以获取超链接文本，即<p>这些标签。</li>
<li>innerText–只能获取文本，获取不了超链接文本。</li>
</ol>
<h5 id="22-1document-createElement-‘标签名’"><a href="#22-1document-createElement-‘标签名’" class="headerlink" title="22.1document.createElement(‘标签名’)"></a>22.1document.createElement(‘标签名’)</h5><p>创建一个新的标签，如 var li &#x3D; document.createElement(‘li’)  &#x3D;&gt;创建了一个li标签</p>
<h5 id="22-2元素-appendChild"><a href="#22-2元素-appendChild" class="headerlink" title="22.2元素.appendChild()"></a>22.2元素.appendChild()</h5><p>往元素容器的后面添加一个新的元素。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//用法： </span></span><br><span class="line"><span class="keyword">var</span> ul = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;ul&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> li = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&#x27;li&#x27;</span>) <span class="comment">//创建了一个li标签</span></span><br><span class="line"></span><br><span class="line">ul.<span class="title function_">appendChild</span>(li) <span class="comment">//从获取到的ul里添加一个li</span></span><br></pre></td></tr></table></figure>



<h4 id="23-动态渲染表格案例"><a href="#23-动态渲染表格案例" class="headerlink" title="23.动态渲染表格案例"></a>23.动态渲染表格案例</h4><p>方案1：从原理出发，用了字符串拼接，对象模型，对象的遍历等技巧</p>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div>
            <table border="1">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>姓名</th>
                        <th>年龄</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td>January</td>
                        <td>$100</td>
                    </tr>
                    <tr>
                        <td>February</td>
                        <td>$80</td>
                    </tr> -->
                </tbody>
                <!-- <tfoot>
                    <tr>
                        <td>Sum</td>
                        <td>$180</td>
                    </tr>
                </tfoot> -->
            </table>
        </div>
        <script type="text/javascript">
            var data = [{
                    id: 1,
                    name: "Json",
                    age: 18
                },
                {
                    id: 2,
                    name: "Ron",
                    age: 28
                },
                {
                    id: 3,
                    name: "Ton",
                    age: 12
                }
            ]
            var str = ''
            data.forEach((item) => { //这里通过遍历data的数据做到动态嵌入值
                str += '<tr>'
                for (var key in item) {
                    str += '<td>' + item[key] + '</td>'
                }
                str += '</tr>'
            })
            document.querySelector("tbody").innerHTML = str 
        </script>
    </body>
</html>


<p>方案2：引入新的内容，**&#96;&#96;反引号**，反引号有两个重要的特点，1是解决了单引号和双引号无法换行的问题，2是可以动态绑定变量（${item.xx}）。</p>
<p>则js代码可以改成：</p>
<ul>
<li><pre><code class="javascript">data.forEach((item)=&gt;&#123;

​	str += `

​		&lt;tr&gt;

​			&lt;td&gt;

​				&lt;span&gt;$&#123;item.id&#125;&lt;/span&gt;

​			&lt;/td&gt;

​			&lt;td&gt;

​				&lt;i&gt;$&#123;item.name&#125;&lt;/i&gt;

​			&lt;/td&gt;

​			&lt;td&gt;

​				&lt;h4&gt;$&#123;item.age&#125;&lt;/h4&gt;

​			&lt;/td&gt;

​		  &lt;/tr&gt;

`

&#125;)

tbody.innerHTML = str
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line">#### 24.操作元素属性</span><br><span class="line"></span><br><span class="line">##### 24.1属性的分类</span><br><span class="line"></span><br><span class="line">原生属性和自定义属性，原生属性有id,class,style,type...自定义属性是html规范内没有的属性，对于标签没有特殊意义，只是为了标注一些内容在标签上。如自定义属性可以定义为：&lt;div **hello=&quot;world&quot;**&gt;123&lt;/div&gt;</span><br><span class="line"></span><br><span class="line">- 原生属性的增加可以通过**元素.id=&#x27;&#x27;, **  **元素.type=&quot;checkbox&quot;**</span><br><span class="line"></span><br><span class="line">- 自定义属性获取--元素.getAttribute(&#x27;hello&#x27;)</span><br><span class="line"></span><br><span class="line">- 自定义属性设置--元素.setAttribute(&#x27;hello&#x27;,200)</span><br><span class="line"></span><br><span class="line">- 自定义属性删除--元素.removeAttribute(&#x27;hello&#x27;)</span><br><span class="line"></span><br><span class="line">- H5自定义属性的操作--拿到box元素H5自定义属性的集合--元素.dataset</span><br><span class="line"></span><br><span class="line">##### 24.2案例：全选 2/8</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">```html</span><br><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">	&lt;head&gt;</span><br><span class="line">		&lt;meta charset=&quot;utf-8&quot;&gt;</span><br><span class="line">		&lt;title&gt;&lt;/title&gt;</span><br><span class="line">		&lt;style&gt;</span><br><span class="line">			div&#123;</span><br><span class="line">				border: #333 2px solid;</span><br><span class="line">				width: 100px;</span><br><span class="line">				border-radius: 10px;</span><br><span class="line">				padding: 20px;</span><br><span class="line">				margin: 50px auto;</span><br><span class="line">			&#125;</span><br><span class="line">		&lt;/style&gt;</span><br><span class="line">	&lt;/head&gt;</span><br><span class="line">	&lt;body&gt;</span><br><span class="line">		&lt;div&gt;</span><br><span class="line">			&lt;input type=&quot;checkbox&quot; onclick=&quot;&quot;/&gt; 全选</span><br><span class="line">			&lt;hr /&gt;</span><br><span class="line">			&lt;input class=&quot;item&quot; type=&quot;checkbox&quot; /&gt; 选项1 &lt;br /&gt;</span><br><span class="line">			&lt;input class=&quot;item&quot; type=&quot;checkbox&quot; /&gt; 选项2 &lt;br /&gt;</span><br><span class="line">			&lt;input class=&quot;item&quot; type=&quot;checkbox&quot; /&gt; 选项3 &lt;br /&gt;</span><br><span class="line">		&lt;/div&gt;</span><br><span class="line">		&lt;script&gt;</span><br><span class="line">			var allBtn = document.querySelector(&#x27;input&#x27;)</span><br><span class="line">			var list = document.querySelectorAll(&quot;.item&quot;)</span><br><span class="line">			allBtn.onclick = function()&#123;</span><br><span class="line">				var t = allBtn.checked</span><br><span class="line">				list.forEach((item)=&gt;&#123;</span><br><span class="line">					item.checked = t</span><br><span class="line">				&#125;)</span><br><span class="line">			&#125;</span><br><span class="line">			list.forEach((item)=&gt;&#123;</span><br><span class="line">				item.onclick = function()&#123;</span><br><span class="line">					var count = 0</span><br><span class="line">					list.forEach((item)=&gt;&#123;</span><br><span class="line">						item.checked == true?count++:&#x27;&#x27;</span><br><span class="line">					&#125;)</span><br><span class="line">					allBtn.checked = count == 3</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;)</span><br><span class="line">		&lt;/script&gt;</span><br><span class="line">	&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
</code></pre>
</li>
</ul>
<h5 id="24-3操作元素样式"><a href="#24-3操作元素样式" class="headerlink" title="24.3操作元素样式"></a>24.3操作元素样式</h5><p>js内操作元素样式分为三种</p>
<p>1.设置元素的样式（样式名中有<strong>划线</strong>的名字&#x3D;&gt;如：<strong>font-size</strong>–只能写成<strong>驼峰（fontSize)<strong>或者</strong>数组关联语法</strong>） 		<strong>格式：元素.style.样式名</strong></p>
<p>2.获取元素的<strong>行内样式</strong>（只能获取到<strong>行内样式&#x3D;&gt;写在标签的style中</strong>）****</p>
<p>3.获取元素<strong>非行内样式</strong>（可以获取行内样式也可以获取<strong>非行内样式</strong>&#x3D;&gt;即为外链式和内嵌式）</p>
<p><strong>格式：window.getComputedStyle(元素).样式名</strong></p>
<h5 id="24-4操作元素类名"><a href="#24-4操作元素类名" class="headerlink" title="24.4操作元素类名**"></a>24.4操作元素类名**</h5><p>交集选择器，如：div.off{…} 表明要既满足div的标签名又要满足off的类名的标签才能生效css样式</p>
<p>元素.className &#x3D; 类名 作用：设置类名</p>
<p>元素.classList.add(类名)  作用：往某个元素的类名列表里添加类名</p>
<p>元素.classList.remove(类名)  作用：往某个元素的类名列表里删去类名</p>
<p>元素.classList.toggle(类名)  作用：类名的切换，<strong>出现又消失</strong></p>
<h5 id="24-5分页渲染案例"><a href="#24-5分页渲染案例" class="headerlink" title="24.5分页渲染案例"></a>24.5分页渲染案例</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//data.js</span></span><br><span class="line">list = [&#123;<span class="attr">img</span>: <span class="string">&quot;images/hb1.png&quot;</span>,<span class="attr">title</span>: <span class="string">&quot;2020国际太湖音乐节&quot;</span>,<span class="attr">city</span>: <span class="string">&quot;城市:常州&quot;</span>,<span class="attr">address</span>: <span class="string">&quot;地址:常州西太湖中国花卉博览中心景苑&quot;</span>,<span class="attr">price</span>: <span class="string">&quot;价格：199-299&quot;</span>,<span class="attr">time</span>: <span class="string">&quot;演出时间：2020.09.19-2020.09.21&quot;</span>&#125;,</span><br><span class="line">&#123;<span class="attr">img</span>: <span class="string">&quot;images/hb2.png&quot;</span>,<span class="attr">title</span>: <span class="string">&quot;2020国际太湖音乐节&quot;</span>,<span class="attr">city</span>: <span class="string">&quot;城市:常州&quot;</span>,<span class="attr">address</span>: <span class="string">&quot;地址:常州西太湖中国花卉博览中心景苑&quot;</span>,<span class="attr">price</span>: <span class="string">&quot;价格：199-299&quot;</span>,<span class="attr">time</span>: <span class="string">&quot;演出时间：2020.09.19-2020.09.21&quot;</span>&#125;,</span><br><span class="line">&#123;<span class="attr">img</span>: <span class="string">&quot;images/hb3.png&quot;</span>,<span class="attr">title</span>: <span class="string">&quot;2020国际太湖音乐节&quot;</span>,<span class="attr">city</span>: <span class="string">&quot;城市:常州&quot;</span>,<span class="attr">address</span>: <span class="string">&quot;地址:常州西太湖中国花卉博览中心景苑&quot;</span>,<span class="attr">price</span>: <span class="string">&quot;价格：199-299&quot;</span>,<span class="attr">time</span>: <span class="string">&quot;演出时间：2020.09.19-2020.09.21&quot;</span>&#125;,</span><br><span class="line">&#123;<span class="attr">img</span>: <span class="string">&quot;images/hb4.png&quot;</span>,<span class="attr">title</span>: <span class="string">&quot;2020国际太湖音乐节&quot;</span>,<span class="attr">city</span>: <span class="string">&quot;城市:常州&quot;</span>,<span class="attr">address</span>: <span class="string">&quot;地址:常州西太湖中国花卉博览中心景苑&quot;</span>,<span class="attr">price</span>: <span class="string">&quot;价格：199-299&quot;</span>,<span class="attr">time</span>: <span class="string">&quot;演出时间：2020.09.19-2020.09.21&quot;</span>&#125;,</span><br><span class="line">&#123;<span class="attr">img</span>: <span class="string">&quot;images/hb3.png&quot;</span>,<span class="attr">title</span>: <span class="string">&quot;2020国际太湖音乐节&quot;</span>,<span class="attr">city</span>: <span class="string">&quot;城市:常州&quot;</span>,<span class="attr">address</span>: <span class="string">&quot;地址:常州西太湖中国花卉博览中心景苑&quot;</span>,<span class="attr">price</span>: <span class="string">&quot;价格：199-299&quot;</span>,<span class="attr">time</span>: <span class="string">&quot;演出时间：2020.09.19-2020.09.21&quot;</span>&#125;,</span><br><span class="line">&#123;<span class="attr">img</span>: <span class="string">&quot;images/hb2.png&quot;</span>,<span class="attr">title</span>: <span class="string">&quot;2020国际太湖音乐节&quot;</span>,<span class="attr">city</span>: <span class="string">&quot;城市:常州&quot;</span>,<span class="attr">address</span>: <span class="string">&quot;地址:常州西太湖中国花卉博览中心景苑&quot;</span>,<span class="attr">price</span>: <span class="string">&quot;价格：199-299&quot;</span>,<span class="attr">time</span>: <span class="string">&quot;演出时间：2020.09.19-2020.09.21&quot;</span>&#125;,</span><br><span class="line">&#123;<span class="attr">img</span>: <span class="string">&quot;images/hb1.png&quot;</span>,<span class="attr">title</span>: <span class="string">&quot;2020国际太湖音乐节&quot;</span>,<span class="attr">city</span>: <span class="string">&quot;城市:常州&quot;</span>,<span class="attr">address</span>: <span class="string">&quot;地址:常州西太湖中国花卉博览中心景苑&quot;</span>,<span class="attr">price</span>: <span class="string">&quot;价格：199-299&quot;</span>,<span class="attr">time</span>: <span class="string">&quot;演出时间：2020.09.19-2020.09.21&quot;</span>&#125;,</span><br><span class="line">&#123;<span class="attr">img</span>: <span class="string">&quot;images/hb4.png&quot;</span>,<span class="attr">title</span>: <span class="string">&quot;2020国际太湖音乐节&quot;</span>,<span class="attr">city</span>: <span class="string">&quot;城市:常州&quot;</span>,<span class="attr">address</span>: <span class="string">&quot;地址:常州西太湖中国花卉博览中心景苑&quot;</span>,<span class="attr">price</span>: <span class="string">&quot;价格：199-299&quot;</span>,<span class="attr">time</span>: <span class="string">&quot;演出时间：2020.09.19-2020.09.21&quot;</span>&#125;,</span><br><span class="line">&#123;<span class="attr">img</span>: <span class="string">&quot;images/hb1.png&quot;</span>,<span class="attr">title</span>: <span class="string">&quot;2020国际太湖音乐节&quot;</span>,<span class="attr">city</span>: <span class="string">&quot;城市:常州&quot;</span>,<span class="attr">address</span>: <span class="string">&quot;地址:常州西太湖中国花卉博览中心景苑&quot;</span>,<span class="attr">price</span>: <span class="string">&quot;价格：199-299&quot;</span>,<span class="attr">time</span>: <span class="string">&quot;演出时间：2020.09.19-2020.09.21&quot;</span>&#125;,</span><br><span class="line">&#123;<span class="attr">img</span>: <span class="string">&quot;images/hb4.png&quot;</span>,<span class="attr">title</span>: <span class="string">&quot;2020国际太湖音乐节&quot;</span>,<span class="attr">city</span>: <span class="string">&quot;城市:常州&quot;</span>,<span class="attr">address</span>: <span class="string">&quot;地址:常州西太湖中国花卉博览中心景苑&quot;</span>,<span class="attr">price</span>: <span class="string">&quot;价格：199-299&quot;</span>,<span class="attr">time</span>: <span class="string">&quot;演出时间：2020.09.19-2020.09.21&quot;</span>&#125;,</span><br><span class="line">&#123;<span class="attr">img</span>: <span class="string">&quot;images/hb3.png&quot;</span>,<span class="attr">title</span>: <span class="string">&quot;2020国际太湖音乐节&quot;</span>,<span class="attr">city</span>: <span class="string">&quot;城市:常州&quot;</span>,<span class="attr">address</span>: <span class="string">&quot;地址:常州西太湖中国花卉博览中心景苑&quot;</span>,<span class="attr">price</span>: <span class="string">&quot;价格：199-299&quot;</span>,<span class="attr">time</span>: <span class="string">&quot;演出时间：2020.09.19-2020.09.21&quot;</span>&#125;,</span><br><span class="line">&#123;<span class="attr">img</span>: <span class="string">&quot;images/hb2.png&quot;</span>,<span class="attr">title</span>: <span class="string">&quot;2020国际太湖音乐节&quot;</span>,<span class="attr">city</span>: <span class="string">&quot;城市:常州&quot;</span>,<span class="attr">address</span>: <span class="string">&quot;地址:常州西太湖中国花卉博览中心景苑&quot;</span>,<span class="attr">price</span>: <span class="string">&quot;价格：199-299&quot;</span>,<span class="attr">time</span>: <span class="string">&quot;演出时间：2020.09.19-2020.09.21&quot;</span>&#125;,</span><br><span class="line">&#123;<span class="attr">img</span>: <span class="string">&quot;images/hb1.png&quot;</span>,<span class="attr">title</span>: <span class="string">&quot;2020国际太湖音乐节&quot;</span>,<span class="attr">city</span>: <span class="string">&quot;城市:常州&quot;</span>,<span class="attr">address</span>: <span class="string">&quot;地址:常州西太湖中国花卉博览中心景苑&quot;</span>,<span class="attr">price</span>: <span class="string">&quot;价格：199-299&quot;</span>,<span class="attr">time</span>: <span class="string">&quot;演出时间：2020.09.19-2020.09.21&quot;</span>&#125;,</span><br><span class="line">&#123;<span class="attr">img</span>: <span class="string">&quot;images/hb2.png&quot;</span>,<span class="attr">title</span>: <span class="string">&quot;2020国际太湖音乐节&quot;</span>,<span class="attr">city</span>: <span class="string">&quot;城市:常州&quot;</span>,<span class="attr">address</span>: <span class="string">&quot;地址:常州西太湖中国花卉博览中心景苑&quot;</span>,<span class="attr">price</span>: <span class="string">&quot;价格：199-299&quot;</span>,<span class="attr">time</span>: <span class="string">&quot;演出时间：2020.09.19-2020.09.21&quot;</span>&#125;,</span><br><span class="line">&#123;<span class="attr">img</span>: <span class="string">&quot;images/hb3.png&quot;</span>,<span class="attr">title</span>: <span class="string">&quot;2020国际太湖音乐节&quot;</span>,<span class="attr">city</span>: <span class="string">&quot;城市:常州&quot;</span>,<span class="attr">address</span>: <span class="string">&quot;地址:常州西太湖中国花卉博览中心景苑&quot;</span>,<span class="attr">price</span>: <span class="string">&quot;价格：199-299&quot;</span>,<span class="attr">time</span>: <span class="string">&quot;演出时间：2020.09.19-2020.09.21&quot;</span>&#125;,</span><br><span class="line">&#123;<span class="attr">img</span>: <span class="string">&quot;images/hb4.png&quot;</span>,<span class="attr">title</span>: <span class="string">&quot;2020国际太湖音乐节&quot;</span>,<span class="attr">city</span>: <span class="string">&quot;城市:常州&quot;</span>,<span class="attr">address</span>: <span class="string">&quot;地址:常州西太湖中国花卉博览中心景苑&quot;</span>,<span class="attr">price</span>: <span class="string">&quot;价格：199-299&quot;</span>,<span class="attr">time</span>: <span class="string">&quot;演出时间：2020.09.19-2020.09.21&quot;</span>&#125;,</span><br><span class="line">]</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br></pre></td><td class="code"><pre><span class="line">//分页渲染.html</span><br><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">			*&#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">padding</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">margin</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css">			<span class="selector-class">.header</span>&#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">width</span>: <span class="number">900px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">background-color</span>: <span class="number">#87CEEB</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">color</span>: white;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">font-size</span>: <span class="number">28px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">display</span>: flex;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">justify-content</span>: center;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">align-items</span>: center;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">line-height</span>: <span class="number">1</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">margin</span>: auto;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css">			<span class="selector-class">.filter</span>&#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">height</span>: <span class="number">50px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">width</span>: <span class="number">900px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">margin</span>: <span class="number">0</span> auto;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">display</span>: flex;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">font-size</span>: <span class="number">14px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">align-items</span>: center;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css">			<span class="selector-class">.filter</span> <span class="selector-tag">p</span>&#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">padding</span>: <span class="number">3px</span> <span class="number">14px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">margin</span>: <span class="number">0</span> <span class="number">6px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">background-color</span>: <span class="number">#87CEEB</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">cursor</span>: pointer;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css">			<span class="selector-class">.filter</span> <span class="selector-tag">p</span><span class="selector-class">.disable</span>&#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">background-color</span>: <span class="number">#ccc</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">cursor</span>: not-allowed;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css">			<span class="selector-class">.filter</span> select&#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">padding</span>: <span class="number">3px</span> <span class="number">7px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">font-size</span>: <span class="number">14px</span>;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css">			<span class="selector-class">.content</span>&#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">width</span>: <span class="number">900px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">height</span>: <span class="number">500px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">margin</span>: auto;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css">			<span class="selector-class">.content</span> <span class="selector-tag">ul</span>&#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">display</span>: flex;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">justify-content</span>: space-around;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css">			<span class="selector-class">.content</span> <span class="selector-tag">ul</span> <span class="selector-tag">li</span>&#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">width</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#000000</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">list-style</span>: none;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css">			<span class="selector-class">.content</span> <span class="selector-tag">ul</span> <span class="selector-tag">li</span> <span class="selector-tag">img</span>&#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">width</span>: <span class="number">100%</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">height</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css">			<span class="selector-class">.content</span> <span class="selector-tag">ul</span> <span class="selector-tag">li</span> <span class="selector-tag">p</span>&#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">line-height</span>: <span class="number">1</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">3px</span> <span class="number">0</span> <span class="number">3px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">font-size</span>: <span class="number">12px</span>;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css">			<span class="selector-class">.footer</span>&#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">width</span>: <span class="number">900px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">height</span>: <span class="number">250px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">background-color</span>: <span class="number">#87CEEB</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">color</span>: white;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">font-size</span>: <span class="number">28px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">display</span>: flex;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">justify-content</span>: center;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">align-items</span>: center;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">line-height</span>: <span class="number">1</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">margin</span>: <span class="number">0</span> auto;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">bottom</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css">			<span class="selector-class">.disable</span>&#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">background-color</span>: <span class="number">#ccc</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">cursor</span>: not-allowed;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css">		</span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;header&quot;</span>&gt;</span>网页头部<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;filter&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;prev&quot;</span>&gt;</span><span class="symbol">&amp;lt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;total&quot;</span>&gt;</span>1 / 1<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;next&quot;</span>&gt;</span><span class="symbol">&amp;gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">select</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;4&quot;</span>&gt;</span>4<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;8&quot;</span>&gt;</span>8<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;12&quot;</span>&gt;</span>12<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;16&quot;</span>&gt;</span>16<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">select</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;content&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;images/hb1.png&quot;</span>/&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">p</span>&gt;</span>2020国际太湖音乐节<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">p</span>&gt;</span>城市:常州<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">p</span>&gt;</span>地址:常州西太湖中国花卉博览中心景苑<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">p</span>&gt;</span>价格：199-299<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">p</span> <span class="attr">style</span>=<span class="string">&quot;margin-bottom: 10px;&quot;</span>&gt;</span>演出时间：2020.09.19-2020.09.21<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;footer&quot;</span>&gt;</span>网页尾部<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;data.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">			<span class="comment">// 1.获取对象模型</span></span></span><br><span class="line"><span class="language-javascript">			<span class="keyword">var</span> ul = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;.content ul&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">			<span class="keyword">var</span> preBtn = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;.prev&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">			<span class="keyword">var</span> nextBtn = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;.next&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">			<span class="keyword">var</span> totalBox = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;.total&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">			</span></span><br><span class="line"><span class="language-javascript">			<span class="comment">// 2.准备变量</span></span></span><br><span class="line"><span class="language-javascript">			<span class="keyword">var</span> current = <span class="number">1</span>;</span></span><br><span class="line"><span class="language-javascript">			<span class="keyword">var</span> pagesize = <span class="number">4</span>;</span></span><br><span class="line"><span class="language-javascript">			<span class="keyword">var</span> total = <span class="number">1</span>;</span></span><br><span class="line"><span class="language-javascript">			</span></span><br><span class="line"><span class="language-javascript">			<span class="comment">// 3.准备一个渲染页面的函数</span></span></span><br><span class="line"><span class="language-javascript">			<span class="title function_">bindHtml</span>()</span></span><br><span class="line"><span class="language-javascript">			<span class="keyword">function</span> <span class="title function_">bindHtml</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">				<span class="keyword">var</span> bind = list.<span class="title function_">slice</span>((current - <span class="number">1</span>) * pagesize, current * pagesize);</span></span><br><span class="line"><span class="language-javascript">				<span class="comment">//4.根据数组渲染页面</span></span></span><br><span class="line"><span class="language-javascript">				<span class="keyword">var</span> str = <span class="string">&#x27;&#x27;</span>;</span></span><br><span class="line"><span class="language-javascript">				bind.<span class="title function_">forEach</span>(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;</span></span><br><span class="line"><span class="language-javascript">					str += <span class="string">`</span></span></span><br><span class="line"><span class="string"><span class="language-javascript">					&lt;li&gt;</span></span></span><br><span class="line"><span class="string"><span class="language-javascript">						&lt;img src=&quot;<span class="subst">$&#123;item.img&#125;</span>&quot;/&gt;</span></span></span><br><span class="line"><span class="string"><span class="language-javascript">						&lt;p&gt;<span class="subst">$&#123;item.title&#125;</span>&lt;/p&gt;</span></span></span><br><span class="line"><span class="string"><span class="language-javascript">						&lt;p&gt;<span class="subst">$&#123;item.city&#125;</span>&lt;/p&gt;</span></span></span><br><span class="line"><span class="string"><span class="language-javascript">						&lt;p&gt;<span class="subst">$&#123;item.address&#125;</span>&lt;/p&gt;</span></span></span><br><span class="line"><span class="string"><span class="language-javascript">						&lt;p&gt;<span class="subst">$&#123;item.price&#125;</span>&lt;/p&gt;</span></span></span><br><span class="line"><span class="string"><span class="language-javascript">						&lt;p style=&quot;margin-bottom: 10px;&quot;&gt;<span class="subst">$&#123;item.time&#125;</span>&lt;/p&gt;</span></span></span><br><span class="line"><span class="string"><span class="language-javascript">					&lt;/li&gt;</span></span></span><br><span class="line"><span class="string"><span class="language-javascript">					`</span></span></span><br><span class="line"><span class="language-javascript">				&#125;)</span></span><br><span class="line"><span class="language-javascript">				ul.<span class="property">innerHTML</span> = str;</span></span><br><span class="line"><span class="language-javascript">				</span></span><br><span class="line"><span class="language-javascript">				<span class="comment">//5.计算总页数</span></span></span><br><span class="line"><span class="language-javascript">				total = <span class="title class_">Math</span>.<span class="title function_">ceil</span>(list.<span class="property">length</span> / pagesize);</span></span><br><span class="line"><span class="language-javascript">				<span class="comment">//渲染totalBox标签</span></span></span><br><span class="line"><span class="language-javascript">				totalBox.<span class="property">innerHTML</span> = current + <span class="string">&#x27; / &#x27;</span> + total;</span></span><br><span class="line"><span class="language-javascript">				</span></span><br><span class="line"><span class="language-javascript">				preBtn.<span class="property">className</span> = current &lt;= <span class="number">1</span> ? <span class="string">&#x27;prev disable&#x27;</span> : <span class="string">&#x27;prev&#x27;</span>;</span></span><br><span class="line"><span class="language-javascript">				nextBtn.<span class="property">className</span> = current &gt;=total ? <span class="string">&#x27;next disable&#x27;</span> : <span class="string">&#x27;next&#x27;</span>; </span></span><br><span class="line"><span class="language-javascript">			&#125;</span></span><br><span class="line"><span class="language-javascript">			preBtn.<span class="property">onclick</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">				<span class="keyword">if</span>(current &lt;= <span class="number">1</span>) <span class="keyword">return</span>;</span></span><br><span class="line"><span class="language-javascript">				current--;</span></span><br><span class="line"><span class="language-javascript">				<span class="title function_">bindHtml</span>();</span></span><br><span class="line"><span class="language-javascript">			&#125;</span></span><br><span class="line"><span class="language-javascript">			nextBtn.<span class="property">onclick</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">				<span class="keyword">if</span>(current &gt;= total) <span class="keyword">return</span>;</span></span><br><span class="line"><span class="language-javascript">				current++;</span></span><br><span class="line"><span class="language-javascript">				<span class="title function_">bindHtml</span>();</span></span><br><span class="line"><span class="language-javascript">			&#125;</span></span><br><span class="line"><span class="language-javascript">		</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>效果图：</p>
<p><img src="/develop/imgs/image-20230307190949493.png" alt="image-20230307190949493"></p>
<p><img src="/develop/imgs/image-20230307191021051.png" alt="image-20230307191021051"></p>
<h4 id="25-获取尺寸"><a href="#25-获取尺寸" class="headerlink" title="25.获取尺寸"></a>25.获取尺寸</h4><h5 id="25-1获取元素尺寸"><a href="#25-1获取元素尺寸" class="headerlink" title="25.1获取元素尺寸"></a>25.1获取元素尺寸</h5><p>获取该元素的内容+padding+border区域的尺寸：元素.offsetWidth&#x2F;元素.offsetHeight</p>
<p>获取该元素的内容+padding区域的尺寸：元素.clientWidth&#x2F;元素.clientHeight</p>
<h5 id="25-2获取元素偏移量"><a href="#25-2获取元素偏移量" class="headerlink" title="25.2获取元素偏移量"></a>25.2获取元素偏移量</h5><p>左偏移和上偏移:元素.offsetLeft&#x2F;元素.offsetTop。</p>
<p>当父元素有定位的时候，偏移量根据父元素，没有定位的时候，根据body</p>
<h5 id="25-3获取窗口尺寸宽高"><a href="#25-3获取窗口尺寸宽高" class="headerlink" title="25.3获取窗口尺寸宽高"></a>25.3获取窗口尺寸宽高</h5><p>BOM级别获取宽度&#x2F;高度：window.innerWidth&#x2F;.innerHeight</p>
<p>DOM级别获取宽度&#x2F;高度：document.documentElement.clientWidth&#x2F;.clientHeight（即html，所以不包括滚动条）</p>
<h5 id="25-4事件绑定"><a href="#25-4事件绑定" class="headerlink" title="25.4事件绑定"></a>25.4事件绑定</h5><p>1.DOM 0级 事件</p>
<p>&#x3D;&gt; 语法：事件源.on事件类型 &#x3D; 事件处理函数</p>
<p>&#x3D;&gt; 注意：给一个事件源的同一个事件类型，只能绑定一个事件处理函数</p>
<p>2.DOM 2级 事件（事件侦听器&#x2F;事件监听器）</p>
<p>&#x3D;&gt; 语法：事件源.addEventListener(‘事件类型’，事件处理函数)，好处是可以绑定多个事件</p>
<h5 id="25-5事件解绑"><a href="#25-5事件解绑" class="headerlink" title="25.5事件解绑"></a>25.5事件解绑</h5><p>1.DOM 0级 事件</p>
<p>&#x3D;&gt;语法：事件源.on事件类型 &#x3D; null</p>
<p>2.DOM 2级 事件（事件侦听器&#x2F;事件监听器）</p>
<p>function a(){ console.log(‘事件处理函数’)}</p>
<p>&#x3D;&gt;语法：div.removeEventListener(‘click’,a)</p>
<p><strong>注意：在DOM2级中绑定和解绑所调用的执行函数必须是具名函数，不能是匿名函数，因此需要有同一地址</strong></p>
<h5 id="25-6事件对象"><a href="#25-6事件对象" class="headerlink" title="25.6事件对象"></a>25.6事件对象</h5><p>是一个对象数据类型，记录了本次事件的所有信息</p>
<p>标准浏览器：</p>
<p>直接在事件处理函数位置书写一个形参，会在事件触发的时候由浏览器直接传递实参，传递的实参就是事件对象，在ie低版本有其它写法。</p>
<p>所以在，在浏览器高低版本的使用时，建议使用：e &#x3D; e || window.event</p>
<h5 id="25-7事件对象中的尺寸属性"><a href="#25-7事件对象中的尺寸属性" class="headerlink" title="25.7事件对象中的尺寸属性"></a>25.7事件对象中的尺寸属性</h5><p>e.clientX&#x2F;e.clientY 光标相对于浏览器可视化窗口左上角的坐标位置</p>
<p>e.pageX&#x2F;e.pageY 光标相对于文档流左上角的坐标位置（可能固定不变）</p>
<p>e.offsetX&#x2F;e.offsetY 光标相对于触发事件的元素的左上角的坐标点（可能是元素的尺寸）</p>
<h4 id="26-事件对象的传播"><a href="#26-事件对象的传播" class="headerlink" title="26.事件对象的传播"></a>26.事件对象的传播</h4><h5 id="26-1事件对象的传播顺序"><a href="#26-1事件对象的传播顺序" class="headerlink" title="26.1事件对象的传播顺序"></a>26.1事件对象的传播顺序</h5><p>在IE低浏览器里是从window &#x3D;&gt; document &#x3D;&gt; html &#x3D;&gt; body &#x3D;&gt; 元素 而其它的浏览器则是反过来，然后默认是浏览器目前两种传播都存在，<strong>但事件的触发只与从内到外的冒泡阶段有关</strong>，因此虽然传递了两遍然而只执行了一次，然后<strong>事件行为具有传递性</strong>，即在元素内部触发的行为，会逐级传递到上层中去，因此如果上层<strong>有绑定相同的触发行为函数，则同样会执行。</strong></p>
<p>一个元素的行为分为三个阶段，从外到内是捕获阶段，然后中间被点击的元素称为目标阶段，再从内到外称为冒泡阶段</p>
<h5 id="26-2获取事件目标-e-target-e-srcElement"><a href="#26-2获取事件目标-e-target-e-srcElement" class="headerlink" title="26.2获取事件目标 e.target || e.srcElement**"></a>26.2获取事件目标 e.target || e.srcElement**</h5><p>补充：如何在捕获阶段执行事件</p>
<p>DOM 0级  事件绑定没有办法修改</p>
<p>DOM 2级  事件绑定才可以修改事件的执行阶段</p>
<p>&#x3D;&gt; 通过addEventListener()的第三个参数来决定，默认是false，表示冒泡阶段，选填是true表示捕获阶段</p>
<h5 id="26-3阻止事件传播"><a href="#26-3阻止事件传播" class="headerlink" title="26.3阻止事件传播"></a>26.3阻止事件传播</h5><p>标准浏览器阻止事件传播：e.stopPropagation()</p>
<p>IE低版本阻止事件传播：e.cancelBublle &#x3D; true</p>
<p><strong>但在这里由于执行的是两个函数而不是获取对象的两个属性，因此单纯的用短路运算符会报错，因此要加上try{}catch(){}进行综合运用</strong>。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//如：</span></span><br><span class="line"><span class="keyword">try</span>&#123;</span><br><span class="line"></span><br><span class="line">	e.<span class="title function_">stopPropagation</span>() <span class="comment">//如果没报错则说明是标准浏览器，执行这行代码</span></span><br><span class="line"></span><br><span class="line">&#125;<span class="keyword">catch</span>(err)&#123;</span><br><span class="line"></span><br><span class="line">	e.<span class="property">cancelBubble</span> = <span class="literal">true</span> <span class="comment">//如果报错说明是IE低版本，执行这行代码</span></span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="26-4阻止默认行为"><a href="#26-4阻止默认行为" class="headerlink" title="26.4阻止默认行为"></a>26.4阻止默认行为</h5><p>阻止元素的默认行为，比如a标签的跳转行为，**<input type='submit'/>时候的无检查报错直接提交文本的行为**</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//如：</span></span><br><span class="line"><span class="keyword">try</span>&#123;</span><br><span class="line"></span><br><span class="line">	e.<span class="title function_">preventDefault</span>() <span class="comment">//如果没报错则说明是标准浏览器，执行这行代码</span></span><br><span class="line"></span><br><span class="line">&#125;<span class="keyword">catch</span>(err)&#123;</span><br><span class="line"></span><br><span class="line">	e.<span class="property">returnValue</span> = <span class="literal">false</span> <span class="comment">//如果报错说明是IE低版本，执行这行代码</span></span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="27-事件委托"><a href="#27-事件委托" class="headerlink" title="27.事件委托**"></a>27.事件委托**</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--案例：--&gt;</span><br><span class="line"><span class="comment">/*需求：</span></span><br><span class="line"><span class="comment">页面上有若干li，点击每一个li在控制台输出该标签内的文本内容,有一个button按钮，当按钮点击的时候，可以创建一个li插入到页面中。*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//1.获取所有的li，添加点击事件</span></span><br><span class="line"><span class="keyword">var</span> lis = <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&#x27;li&#x27;</span>)</span><br><span class="line">lis.<span class="title function_">forEach</span>(<span class="params"><span class="keyword">function</span>(item)</span>)&#123;</span><br><span class="line">   item.<span class="property">onclick</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">     <span class="variable language_">console</span>.<span class="title function_">log</span>(item.<span class="property">innerText</span>) </span><br><span class="line">  &#125;    </span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//2.获取到button按钮，添加点击事件</span></span><br><span class="line"><span class="keyword">var</span> btn = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;button&#x27;</span>)</span><br><span class="line"><span class="keyword">var</span> ul = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;ul&#x27;</span>)</span><br><span class="line">btn.<span class="property">onclick</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> li = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&#x27;li&#x27;</span>)</span><br><span class="line">    li.<span class="property">innerText</span> = <span class="string">&#x27;我是后来的&#x27;</span></span><br><span class="line">    ul.<span class="title function_">appendChild</span>(li)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//上面的做法是通过循环绑定事件，给多个元素绑定事件的方式，缺点是对于动态添加的元素（后期渲染的元素），无法实现对应的功能，且是对DOM进行大量操作，浪费资源造成卡顿</span></span><br></pre></td></tr></table></figure>

<p>因为基于上面的方法不太好实现页面<strong>动态渲染+元素行为事件的组合</strong>，因此更适合的方法是<strong>事件委托</strong></p>
<ol>
<li>因为需求是点击li的时候，做一些事情</li>
<li>因为事情的冒泡传播，如果给<strong>结构父级</strong>身上绑定一个点击事件，也会因为点击<strong>li</strong>而触发<ul>
<li>例子：给ul绑定一个点击事件，当点击ul时会触发，然而点击li也会触发，因为<strong>传播</strong></li>
</ul>
</li>
<li>在事件对象中有一个信息叫做<strong>事件目标</strong>（e.target)，它的作用是可以准确获取触发事件的对应元素，如果是因为点击ul触发的，事件目标就是ul，如果是li，那么事件目标就是li</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//获取ul标签，因为ul是所有li共同的父级结构</span></span><br><span class="line"><span class="keyword">var</span> ul = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;ul&#x27;</span>)</span><br><span class="line"><span class="comment">//给ul绑定点击事件</span></span><br><span class="line">ul.<span class="property">onclick</span> = <span class="keyword">function</span>(<span class="params">e</span>)&#123;</span><br><span class="line">	<span class="comment">//处理事件对象兼容</span></span><br><span class="line">	e = e || <span class="variable language_">window</span>.<span class="property">event</span></span><br><span class="line">	<span class="comment">//处理事件目标兼容</span></span><br><span class="line">	<span class="keyword">var</span> target = e.<span class="property">target</span> || e.<span class="property">srcElement</span></span><br><span class="line">	</span><br><span class="line">	<span class="comment">//判断你点击的确实是li</span></span><br><span class="line">	<span class="keyword">if</span>(target.<span class="property">nodeName</span> == <span class="string">&#x27;LI&#x27;</span>)&#123;</span><br><span class="line">	<span class="comment">//在控制台打印你点击的这个li的文本内容</span></span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(target.<span class="property">innnerText</span>)</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//2.获取到button按钮，添加点击事件</span></span><br><span class="line"><span class="keyword">var</span> btn = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;button&#x27;</span>)</span><br><span class="line">btn.<span class="property">onclick</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> li = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&#x27;li&#x27;</span>)</span><br><span class="line">    li.<span class="property">innerText</span> = <span class="string">&#x27;我是后来的&#x27;</span></span><br><span class="line">    ul.<span class="title function_">appendChild</span>(li)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>事件委托的原则尽可能找到<strong>最近</strong>的<strong>不动</strong>的公共<strong>结构父级</strong></p>
<h4 id="28-正则表达式（2023-3-x2F-9）"><a href="#28-正则表达式（2023-3-x2F-9）" class="headerlink" title="28.正则表达式（2023.3&#x2F;9）"></a>28.正则表达式（2023.3&#x2F;9）</h4><h5 id="28-1创建方法"><a href="#28-1创建方法" class="headerlink" title="28.1创建方法"></a>28.1创建方法</h5><p>正则表达式：RegExp—-js中的一种复杂数据类型，作用是用来验证字符串是否符合规则</p>
<p>创建方法：1.var reg &#x3D; &#x2F;xxxx&#x2F;  2.var reg &#x3D; new RegExp(‘xxxx’)</p>
<h5 id="28-2验证方法"><a href="#28-2验证方法" class="headerlink" title="28.2验证方法"></a>28.2验证方法</h5><p>var reg &#x3D; &#x2F;abcd&#x2F;</p>
<p>var res &#x3D; reg.test(‘asdsdfsavawaghabcd’)</p>
<h5 id="175-186课程跳过，感觉用处不是很大"><a href="#175-186课程跳过，感觉用处不是很大" class="headerlink" title="175-186课程跳过，感觉用处不是很大"></a>175-186课程跳过，感觉用处不是很大</h5><h4 id="29-自执行函数"><a href="#29-自执行函数" class="headerlink" title="29.自执行函数"></a>29.自执行函数</h4><p>意义：利用函数的私有作用域，保护<strong>变量私有化</strong>，且不去污染全局</p>
<p>语法：（function() {代码})()&#x2F;~function(){代码}()&#x2F;!function(){代码}()</p>
<h5 id="29-1自执行函数（概念有点意思，可能比较重要）"><a href="#29-1自执行函数（概念有点意思，可能比较重要）" class="headerlink" title="29.1自执行函数（概念有点意思，可能比较重要）"></a>29.1自执行函数（概念有点意思，可能比较重要）</h5><p>this表示的是该函数的context(执行上下文)</p>
<p><img src="/develop/imgs/image-20230309161158239.png" alt="image-20230309161158239"></p>
<h5 id="29-2强行改变this指向"><a href="#29-2强行改变this指向" class="headerlink" title="29.2强行改变this指向"></a>29.2强行改变this指向</h5><ol>
<li>函数名.call()&#x2F;对象名.call()<ul>
<li>意义：修改函数内的this指向</li>
<li>第一个参数：函数内的this指向 (如obj,arr,<strong>null</strong>(当this指向的对象不重要时))</li>
<li>第二个参数开始：依次给函数传递实参</li>
<li><strong>特点：立即调用函数</strong></li>
</ul>
</li>
<li>函数名.apply()&#x2F;对象名.函数名.apply()<ul>
<li>意义：修改函数内的this指向</li>
<li>第一个参数：函数内的this指向 (如obj,arr,<strong>null</strong>(当this指向的对象不重要时))</li>
<li>第二个参数：是一个包含函数参数的数组</li>
<li><strong>特点：立即调用函数</strong></li>
</ul>
</li>
<li>函数名.bind()&#x2F;对象名.函数名.bind()<ul>
<li>第一个参数：函数内的this指向</li>
<li>第二个参数开始：依次给函数传递实参</li>
<li><strong>特点：不会立即调用函数，而是返回一个新的改变了this指向的函数</strong></li>
<li>主要用在如setTimeout()，onclick()等如果需要改变this指向（如果使用call或者apply会马上调用，则达不到效果），但又不能让函数立即执行的函数调用。</li>
</ul>
</li>
</ol>
<h4 id="30-ES6"><a href="#30-ES6" class="headerlink" title="30.ES6"></a>30.ES6</h4><h5 id="30-1ES6定义变量"><a href="#30-1ES6定义变量" class="headerlink" title="30.1ES6定义变量"></a>30.1ES6定义变量</h5><p>ES6新增let(变量)和const(常量)</p>
<h5 id="30-2ES6模板字符串"><a href="#30-2ES6模板字符串" class="headerlink" title="30.2ES6模板字符串"></a>30.2ES6模板字符串</h5><p>即**&#96;&#96;**，可以换行，添加字符串变量{$}</p>
<h5 id="30-3ES6的箭头函数"><a href="#30-3ES6的箭头函数" class="headerlink" title="30.3ES6的箭头函数"></a>30.3ES6的箭头函数</h5><p>ES6语法中定义函数的一种方式，只能用来定义<strong>函数表达式（匿名函数）</strong>当你把函数当作一个值赋值给另一个内容的时候，叫做函数表达式，同时箭头函数没有this，因此在函数执行语句中如果调用了，就只会向外寻找。</p>
<p>有以下几种可以用<strong>箭头函数</strong>—-()&#x3D;&gt;{}</p>
<ul>
<li>var xxx &#x3D; function(){}</li>
<li>var obj &#x3D; { xxx: function() {} }</li>
<li>xxx.onclick &#x3D; function() {}</li>
<li>xxx.addEventListener(‘click’,function() {})</li>
<li>xxx.forEach(function() {})</li>
<li>setTimeout(function() {},1000)</li>
</ul>
<h5 id="30-4函数参数默认值"><a href="#30-4函数参数默认值" class="headerlink" title="30.4函数参数默认值"></a>30.4函数参数默认值</h5><p>直接在形参赋值，如果调用函数时没给值，则会自动赋值为默认值。</p>
<h5 id="30-5ES6的解构赋值"><a href="#30-5ES6的解构赋值" class="headerlink" title="30.5ES6的解构赋值"></a>30.5ES6的解构赋值</h5><p>意义：为了在获取多元数组或者数据较多的对象中的数据时，让获取数据的途径变得更加简便。</p>
<ol>
<li><p>解构数组</p>
<ul>
<li>使用[]解构数组，语法：var [变量1，变量2，…] &#x3D; 数组</li>
<li>按照索引，依次从数组内给每一个变量赋值</li>
<li>简单来说，数组怎么写，解构怎么写</li>
</ul>
</li>
<li><p>解构对象</p>
<ul>
<li>使用{}解构对象，语法：var {键名1，键名2，…} &#x3D; 对象</li>
<li>按照键名，依次定义变量从对象中获取指定成员</li>
</ul>
</li>
<li><p>tips</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">3</span>; i++)&#123;</span><br><span class="line">	<span class="comment">//异步</span></span><br><span class="line">	<span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">		<span class="variable language_">console</span>.<span class="title function_">log</span>(i)</span><br><span class="line">	&#125;,<span class="number">0</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//输出结果为3 3 3</span></span><br><span class="line"><span class="comment">//原因是由于使用var声明变量，所以变量没有锁定在每一个块级作用域中，同时在循环执行中，由于setTimeout是异步函数，而异步的执行是先放置到队列中，等到同步的代码执行完毕，再执行异步的代码，因此最后的var i相对于是全局变量，因此i是3输出3次</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">3</span>; i++)&#123;</span><br><span class="line">	<span class="comment">//异步</span></span><br><span class="line">	<span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">		<span class="variable language_">console</span>.<span class="title function_">log</span>(i)</span><br><span class="line">	&#125;,<span class="number">0</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//输出结果为0 1 2</span></span><br><span class="line"><span class="comment">//这里可以认为let i是局部变量，所以在i++的时候会和setTimeout一同绑定在未更新的状态。</span></span><br></pre></td></tr></table></figure></li>
</ol>
<h5 id="30-6ES6的扩展运算符"><a href="#30-6ES6的扩展运算符" class="headerlink" title="30.6ES6的扩展运算符"></a>30.6ES6的扩展运算符</h5><p>语法： …xx</p>
<p>作用：展开&#x2F;合并</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//展开,用处1</span></span><br><span class="line"><span class="keyword">const</span> a1 = [<span class="number">100</span>, <span class="number">200</span>, <span class="number">300</span>]</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">100</span>,<span class="number">200</span>,<span class="number">300</span>) <span class="comment">//等价于</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(...a1)</span><br><span class="line"><span class="comment">//用处2</span></span><br><span class="line"><span class="keyword">const</span> a2 = [...a1,<span class="number">500</span>,<span class="number">600</span>,<span class="number">700</span>]</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a2)</span><br></pre></td></tr></table></figure>



<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//用处3，用在选取元素对象时候，在选取到多个对象时返回的是伪数组，不能用push方法，此时可以用展开运算符转成数组</span></span><br><span class="line"><span class="keyword">const</span> lis = [...<span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&#x27;li&#x27;</span>)] <span class="comment">//外面使用中括号后就能转型成数组，所以能使用push方法</span></span><br><span class="line"><span class="comment">//lis.push(100)</span></span><br><span class="line"><span class="keyword">const</span> res = lis.<span class="title function_">filter</span>(<span class="function"><span class="params">item</span> =&gt;</span> item.<span class="property">innerText</span> % <span class="number">2</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(lis)</span><br></pre></td></tr></table></figure>

<h5 id="30-6运动函数"><a href="#30-6运动函数" class="headerlink" title="30.6运动函数"></a>30.6运动函数</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">			<span class="selector-tag">div</span>&#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">width</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">margin</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">background-color</span>: <span class="number">#87CEEB</span>;</span></span><br><span class="line"><span class="language-css">				</span></span><br><span class="line"><span class="language-css">				<span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">top</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">left</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css">		</span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">			<span class="keyword">var</span> ele = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;div&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">			ele.<span class="property">onclick</span> = <span class="function">()=&gt;</span>&#123;</span></span><br><span class="line"><span class="language-javascript">				<span class="title function_">move</span>(ele,<span class="string">&#x27;top&#x27;</span>,<span class="number">600</span>)</span></span><br><span class="line"><span class="language-javascript">			&#125;</span></span><br><span class="line"><span class="language-javascript">			<span class="comment">//元素运动函数</span></span></span><br><span class="line"><span class="language-javascript">			<span class="keyword">function</span> <span class="title function_">move</span>(<span class="params">ele,type,target</span>)&#123;</span></span><br><span class="line"><span class="language-javascript">				<span class="comment">//这里给间隔运行一个常量，为了后面不使用时清除</span></span></span><br><span class="line"><span class="language-javascript">				<span class="keyword">const</span> timer = <span class="built_in">setInterval</span>(<span class="function">()=&gt;</span>&#123;</span></span><br><span class="line"><span class="language-javascript">					<span class="comment">//获取元素当前位置</span></span></span><br><span class="line"><span class="language-javascript">					<span class="keyword">let</span> current =  <span class="built_in">parseInt</span>(<span class="variable language_">window</span>.<span class="title function_">getComputedStyle</span>(ele)[type])</span></span><br><span class="line"><span class="language-javascript">					<span class="comment">//为了呈现减速运动</span></span></span><br><span class="line"><span class="language-javascript">					<span class="keyword">let</span> distance = (target - current) / <span class="number">10</span></span></span><br><span class="line"><span class="language-javascript">					<span class="comment">//让向左/右运动都能不会无限输出0，因为小于1px像素无法被执行</span></span></span><br><span class="line"><span class="language-javascript">					distance = <span class="title class_">Math</span>.<span class="title function_">abs</span>(<span class="title class_">Math</span>.<span class="title function_">ceil</span>(distance))</span></span><br><span class="line"><span class="language-javascript">					<span class="comment">//加上px单位才是像素</span></span></span><br><span class="line"><span class="language-javascript">					ele.<span class="property">style</span>[type] = current + distance + <span class="string">&#x27;px&#x27;</span></span></span><br><span class="line"><span class="language-javascript">					<span class="keyword">if</span>(distance === target)&#123;</span></span><br><span class="line"><span class="language-javascript">						<span class="built_in">clearInterval</span>(timer)</span></span><br><span class="line"><span class="language-javascript">					&#125;				</span></span><br><span class="line"><span class="language-javascript">				&#125;,<span class="number">60</span>)</span></span><br><span class="line"><span class="language-javascript">			&#125;</span></span><br><span class="line"><span class="language-javascript">		</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//进一步提升，可以同时操作多变量</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">move2</span>(<span class="params">ele, target</span>) &#123;</span><br><span class="line">				<span class="keyword">for</span> (<span class="keyword">let</span> k <span class="keyword">in</span> target) &#123;</span><br><span class="line">					<span class="comment">//这里给间隔运行一个常量，为了后面不使用时清除</span></span><br><span class="line">					<span class="keyword">const</span> timer = <span class="built_in">setInterval</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">						<span class="comment">//获取元素当前位置</span></span><br><span class="line">						<span class="keyword">let</span> current</span><br><span class="line">						<span class="keyword">if</span> (k === <span class="string">&#x27;opacity&#x27;</span>) &#123;</span><br><span class="line">							current = <span class="variable language_">window</span>.<span class="title function_">getComputedStyle</span>(ele)[k] * <span class="number">100</span></span><br><span class="line">						&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">							current = <span class="built_in">parseInt</span>(<span class="variable language_">window</span>.<span class="title function_">getComputedStyle</span>(ele)[k])</span><br><span class="line">						&#125;</span><br><span class="line">						<span class="comment">//为了呈现减速运动</span></span><br><span class="line">						<span class="keyword">let</span> distance = (target[k] - current) / <span class="number">10</span></span><br><span class="line">						<span class="comment">//让向左/右运动都能不会无限输出0，因为小于1px像素无法被执行,同时正数向上取整，负数向下</span></span><br><span class="line">						distance = distance &gt; <span class="number">0</span> ? <span class="title class_">Math</span>.<span class="title function_">ceil</span>(distance) : <span class="title class_">Math</span>.<span class="title function_">floor</span>(distance)</span><br><span class="line">						<span class="keyword">if</span> (distance === target[k]) &#123;</span><br><span class="line">							<span class="built_in">clearInterval</span>(timer)</span><br><span class="line">						&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">							<span class="keyword">if</span> (k === <span class="string">&#x27;opacity&#x27;</span>) &#123;</span><br><span class="line">								ele.<span class="property">style</span>[k] = (current + distance) / <span class="number">100</span></span><br><span class="line">							&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">								<span class="comment">//加上px单位才是像素</span></span><br><span class="line">								ele.<span class="property">style</span>[k] = current + distance + <span class="string">&#x27;px&#x27;</span></span><br><span class="line">							&#125;</span><br><span class="line">						&#125;</span><br><span class="line">					&#125;, <span class="number">60</span>)</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br></pre></td></tr></table></figure>

<h4 id="31-认识面向对象"><a href="#31-认识面向对象" class="headerlink" title="31.认识面向对象"></a>31.认识面向对象</h4><h5 id="31-1构造函数的书写"><a href="#31-1构造函数的书写" class="headerlink" title="31.1构造函数的书写"></a>31.1构造函数的书写</h5><p>构造函数也是一个函数，只不过使用的时候需要和new关键字连用，书写函数名的时候最好首字母大写，构造函数内不要写return,因为当你使用new创建一个新的对象的时候，构造函数内部会自动创建一个obj并自动调用return进行返回，所以不用return，new生成的对象叫做实例。</p>
<h5 id="31-2对象访问机制"><a href="#31-2对象访问机制" class="headerlink" title="31.2对象访问机制"></a>31.2对象访问机制</h5><p>主要是为了解决构造函数的不合理，当把方法书写在构造函数内部的时候，随着创建对象的增加，会在每一次都创建一个新的内部地址，造成资源的浪费。因此，<strong>把属性书写在构造函数体内，把方法书写在构造函数的原型上（prototype）</strong>。</p>
<p><strong>原型：一个函数伴生的存储空间，专门由构造函数向内添加方法，供构造函数的实例使用。</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params">name</span>)&#123;</span><br><span class="line">	<span class="variable language_">this</span>.<span class="property">name</span> = name</span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">a</span> = <span class="number">100</span> <span class="comment">//因为prototype是复杂数据类型，即对象数据类型，因此这行代码相当于给prototype对象增加a这个属性并且赋值为100</span></span><br><span class="line"><span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="title function_">sayHi</span>() = <span class="keyword">function</span>(<span class="params"></span>)&#123; <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;ss&#x27;</span>) &#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> p1 = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&#x27;jack&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> p2 = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&#x27;rose&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">//这里p1和p2的sayHi由于是同一个地方的存储，因此输出的结果为true，所以不会浪费内存空间</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(p1.<span class="property">sayHi</span> === p2.<span class="property">sayHi</span>)</span><br></pre></td></tr></table></figure>

<h4 id="32-原型和原型链"><a href="#32-原型和原型链" class="headerlink" title="32.原型和原型链"></a>32.原型和原型链</h4><p>227-228不难理解，看一遍能懂，但实际开发应该用不到，先不去记忆，后面如果用到再记忆</p>
<p>原型就是proptype这个属性，一般把属性书写在构造函数体内，把方法书写在构造函数的原型上（prototype），是为了解决构造函数的不合理现象，避免造成资源的浪费，一般来说，proptype指向构造函数天生自带的_prop_属性，里面放置的就是添加的属性和方法，这个–prop指向object的proptype(顶级对象)，同时在用new构造函数生成实例的时候，实例本身是只有_prop_属性的，但它是指向构造函数的proptype，这个指向会随着构造函数的改变而改变，详情可见<strong>41.继承</strong>中的原型继承。</p>
<p>229-233应该用不到</p>
<h4 id="33-ES6的类的语法（ES5构造方法和类的升级，使用起来更加明确）"><a href="#33-ES6的类的语法（ES5构造方法和类的升级，使用起来更加明确）" class="headerlink" title="33.ES6的类的语法（ES5构造方法和类的升级，使用起来更加明确）"></a>33.ES6的类的语法（ES5构造方法和类的升级，使用起来更加明确）</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span>&#123;</span><br><span class="line"></span><br><span class="line">​	<span class="title function_">constructor</span>(<span class="params">name,age</span>)&#123;</span><br><span class="line"></span><br><span class="line">​		<span class="variable language_">this</span>.<span class="property">name</span> = name</span><br><span class="line"></span><br><span class="line">​		<span class="variable language_">this</span>.<span class="property">age</span> = age</span><br><span class="line"></span><br><span class="line">​	&#125;</span><br><span class="line">    <span class="comment">//原型方法，直接在类中选方法，不会多次占用内存，相当于变成了一个属性</span></span><br><span class="line">    <span class="title function_">setname</span>(<span class="params"></span>)&#123;...&#125;</span><br><span class="line">    <span class="title function_">getname</span>(<span class="params"></span>)&#123;...&#125;</span><br><span class="line">    <span class="comment">//如果是类要使用，而不是实例要使用，则设置成静态方法，调用方式---类名.方法名</span></span><br><span class="line">    <span class="keyword">static</span> <span class="title function_">p</span>(<span class="params"></span>)&#123;...&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src="/develop/imgs/image-20230311232059813.png" alt="image-20230311232059813"></p>
<p>​													图3	ES5的创建对象实例</p>
<p><img src="/develop/imgs/image-20230311232219767.png" alt="image-20230311232219767"></p>
<p><img src="/develop/imgs/image-20230311232246540.png" alt="image-20230311232246540"></p>
<p><img src="/develop/imgs/image-20230311232347999.png" alt="image-20230311232347999"></p>
<h4 id="34-贪吃蛇实例（没有素材无法实现）"><a href="#34-贪吃蛇实例（没有素材无法实现）" class="headerlink" title="34.贪吃蛇实例（没有素材无法实现）"></a>34.贪吃蛇实例（没有素材无法实现）</h4><h4 id="35-前后端交互"><a href="#35-前后端交互" class="headerlink" title="35.前后端交互"></a>35.前后端交互</h4><h5 id="35-1请求方式"><a href="#35-1请求方式" class="headerlink" title="35.1请求方式"></a>35.1请求方式</h5><ol>
<li>GET：偏向获取的语义，向服务器索取内容</li>
<li>POST：偏向提交的语义，向服务器提供内容</li>
<li>PUT：偏向提交的语义，向服务器提供内容，并进行添加操作</li>
<li>DELETE：偏向删除的语义，告诉服务器需要删除什么</li>
<li>PATCH：偏向提交的语义，告诉服务器需要在原有的基础上修改什么（局部修改）</li>
<li>HEAD：用于获取服务响应头信息的一个请求</li>
<li>CONNECT：保留请求方式（用途不大）</li>
<li>OPTIONS：不需要任何响应的请求，只是为了获取服务器信息（服务器时间，功能等等），需要服务器允许</li>
</ol>
<p><img src="/develop/imgs/image-20230312101844370.png" alt="image-20230312101844370"></p>
<h5 id="35-2登录页面（没有服务器-不了解node-js）"><a href="#35-2登录页面（没有服务器-不了解node-js）" class="headerlink" title="35.2登录页面（没有服务器-不了解node.js）"></a>35.2登录页面（没有服务器-不了解node.js）</h5><p>252-259</p>
<h5 id="35-3ajax状态码"><a href="#35-3ajax状态码" class="headerlink" title="35.3ajax状态码"></a>35.3ajax状态码</h5><p><img src="/develop/imgs/image-20230312103650738.png" alt="image-20230312103650738"></p>
<h5 id="35-4http状态码"><a href="#35-4http状态码" class="headerlink" title="35.4http状态码"></a>35.4http状态码</h5><p><img src="/develop/imgs/image-20230312104458482.png" alt="image-20230312104458482"></p>
<h5 id="35-5ajax封装"><a href="#35-5ajax封装" class="headerlink" title="35.5ajax封装"></a>35.5ajax封装</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">ajax</span>(<span class="params">options = &#123;&#125;</span>)&#123;</span><br><span class="line">	<span class="comment">//1.验证url是否为空，这里用到undefinded,null或者&#x27;&#x27;判断时为fasle</span></span><br><span class="line">	<span class="keyword">if</span>(!options.<span class="property">url</span>)&#123;</span><br><span class="line">		<span class="comment">//手动抛出异常，因为如果用console.log的话可能会让比较多的文本存在于控制台中，使得出错的结果不清晰，而且这里已经出错后，后面的代码执行下去也没什么意义，因此直接抛出错误让信息更加明显并且让程序终止</span></span><br><span class="line">		<span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">&#x27;url为必填项，请填写&#x27;</span>)</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span>(!(options.<span class="property">methods</span> === <span class="literal">undefined</span> || <span class="regexp">/^(get|post)$/i</span>.<span class="title function_">test</span>(options.<span class="property">methods</span>)))&#123;</span><br><span class="line">		<span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">&#x27;methods只支持get/post&#x27;</span>)</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span>(!(options.<span class="property">async</span> === <span class="literal">undefined</span> || <span class="keyword">typeof</span> options.<span class="property">async</span> === <span class="string">&#x27;boolean&#x27;</span>))&#123;</span><br><span class="line">		<span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">&#x27;async只接受true/false&#x27;</span>)</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span>(!(options.<span class="property">data</span> === <span class="literal">undefined</span> || <span class="keyword">typeof</span> options.<span class="property">data</span> === <span class="string">&#x27;string&#x27;</span>))&#123;</span><br><span class="line">		<span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">&#x27;只能接受字符串&#x27;</span>)</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span>(!(options.<span class="property">token</span> === <span class="literal">undefined</span> || <span class="keyword">typeof</span> options.<span class="property">token</span> === <span class="string">&#x27;string&#x27;</span>))&#123;</span><br><span class="line">		<span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">&#x27;只能接受字符串&#x27;</span>)</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="35-6-268-273跳过"><a href="#35-6-268-273跳过" class="headerlink" title="35.6  268-273跳过"></a>35.6  268-273跳过</h5><h4 id="36-认识Promise"><a href="#36-认识Promise" class="headerlink" title="36.认识Promise"></a>36.认识Promise</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> p = <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span>(<span class="params">resolve,reject</span>)&#123;</span><br><span class="line"></span><br><span class="line">​	<span class="comment">//要执行的异步代码</span></span><br><span class="line"></span><br><span class="line">​	<span class="comment">//执行resolve(),promise状态变为成功，执行p.then对应的函数</span></span><br><span class="line"></span><br><span class="line">​	<span class="comment">//执行reject(),promise状态变为失败，执行p.catch对应的函数</span></span><br><span class="line"></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">p.<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line"></span><br><span class="line">​	<span class="comment">// ...</span></span><br><span class="line"></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">p.<span class="title function_">catch</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line"></span><br><span class="line">​	<span class="comment">// ...</span></span><br><span class="line"></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h5 id="36-1aysnc和await"><a href="#36-1aysnc和await" class="headerlink" title="36.1aysnc和await"></a>36.1aysnc和await</h5><p>ES7后的语法，目的是为了解决promise的多次封装和调用then的问题。</p>
<p>async关键字，书写在函数的前面：async function() {}&#x2F;async () &#x3D;&gt; {}。</p>
<p>作用：该函数内可以使用await关键字（两者是配套出现的），使用await之后，代码可以变成伪同步，即在内部直接使用的时候会等到使用await关键字的这一行代码执行完毕后，才会执行下一行代码，避免了使用promise的时候多次调用then，感觉只要知道最后一种怎么用的就行。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>)&#123;</span><br><span class="line">	<span class="comment">//pAjax返回出来的promise对象会执行</span></span><br><span class="line">	<span class="comment">//把resovle()的时候括号里面的内容赋值给r1，再向后执行代码</span></span><br><span class="line">	<span class="keyword">const</span> r1 = <span class="keyword">await</span> <span class="title function_">pAjax</span>(&#123;...&#125;)</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(r1)</span><br><span class="line">	<span class="comment">//需求2</span></span><br><span class="line">	<span class="keyword">const</span> r2 = <span class="keyword">await</span> <span class="title function_">pAjax</span>(&#123;...&#125;)</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(r2)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<p><img src="/develop/imgs/image-20230312211913946.png" alt="image-20230312211913946"></p>
<p>​							图为从<strong>回调地狱到promise到async</strong></p>
<p>277-283跳过</p>
<h4 id="37-认识服务器-284"><a href="#37-认识服务器-284" class="headerlink" title="37.认识服务器(284)"></a>37.认识服务器(284)</h4><p>phpstudy的配置</p>
<h5 id="37-1php语法"><a href="#37-1php语法" class="headerlink" title="37.1php语法"></a>37.1php语法</h5><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;?php</span></span><br><span class="line">	<span class="variable">$num</span> = <span class="number">100</span>;</span><br><span class="line"></span><br><span class="line">	<span class="keyword">echo</span> <span class="variable">$num</span>;</span><br><span class="line">	<span class="comment">/*</span></span><br><span class="line"><span class="comment">	变量的定义使用$xxx</span></span><br><span class="line"><span class="comment">	</span></span><br><span class="line"><span class="comment">	在php中有两种定义字符串的方式，</span></span><br><span class="line"><span class="comment">	1.单引号(&#x27;&#x27;):不能直接解析变量</span></span><br><span class="line"><span class="comment">	2.双引号(&quot;&quot;):可以直接解析变量</span></span><br><span class="line"><span class="comment">	</span></span><br><span class="line"><span class="comment">	字符串拼接使用(.)进行</span></span><br><span class="line"><span class="comment">	*/</span></span><br><span class="line">	</span><br><span class="line"></span><br><span class="line">	<span class="variable">$s1</span> = <span class="string">&#x27;你好，我$age岁&#x27;</span></span><br><span class="line">    <span class="variable">$s2</span> = <span class="string">&quot;你好，我<span class="subst">$age</span>岁&quot;</span></span><br><span class="line">	<span class="keyword">echo</span> <span class="variable">$s2</span></span><br><span class="line"><span class="meta">?&gt;</span></span><br></pre></td></tr></table></figure>

<h5 id="37-2php操作数据库"><a href="#37-2php操作数据库" class="headerlink" title="37.2php操作数据库"></a>37.2php操作数据库</h5><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;?php</span></span><br><span class="line">	<span class="comment">//分别是主机名，用户名，密码，库名</span></span><br><span class="line">	<span class="variable">$link</span> = <span class="title function_ invoke__">mysqli_connect</span>(<span class="string">&#x27;localhost&#x27;</span>,<span class="string">&#x27;root&#x27;</span>,<span class="string">&#x27;123456&#x27;</span>,<span class="string">&#x27;ceshi&#x27;</span>);</span><br><span class="line">	<span class="comment">//分别是连接函数返回的值和sql语句</span></span><br><span class="line">	<span class="variable">$res</span> = <span class="title function_ invoke__">mysqli_query</span>(<span class="variable">$link</span>,<span class="string">&quot;SELECT * FROM `form1`&quot;</span>);</span><br><span class="line">	<span class="comment">//分别是查询结果和MYSQLI_ASSOC</span></span><br><span class="line">	<span class="variable">$data</span> = <span class="title function_ invoke__">mysqli_fetch_all</span>(<span class="variable">$res</span>,MYSQLI_ASSOC);</span><br><span class="line">	<span class="comment">//输出转为json</span></span><br><span class="line">	<span class="keyword">echo</span> <span class="title function_ invoke__">json_encode</span>(<span class="variable">$data</span>);</span><br><span class="line"><span class="meta">?&gt;</span></span><br></pre></td></tr></table></figure>

<h5 id="37-3数据库"><a href="#37-3数据库" class="headerlink" title="37.3数据库"></a>37.3数据库</h5><p>关系型(sql)和非关系型(MongoDB)</p>
<p>操作sql类数据库的语句，mysql也是sql类数据库的一种</p>
<p><strong>书写规范：</strong></p>
<ol>
<li>sql语句内，<strong>表名和字段名</strong>推荐使用<strong>反引号</strong>（&#96;&#96;）</li>
<li>推荐关键字用大写</li>
<li>如果值是一个字符串类型，那么需要单独再包裹引号</li>
</ol>
<p><strong>数据库的增删改查：</strong></p>
<ul>
<li><p>增：</p>
<p>&#x2F;&#x2F;按照表的结构顺序依次添加对应字段的值</p>
</li>
</ul>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `表` <span class="keyword">VALUES</span>(数据<span class="number">1</span>，数据<span class="number">2.</span>..) </span><br></pre></td></tr></table></figure>

<p>​		&#x2F;&#x2F;按照表中想要添加的字段的信息按量添加</p>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> `表` (字段<span class="number">1</span>，字段<span class="number">2</span>) <span class="keyword">VALUES</span>(数据<span class="number">1</span>，数据<span class="number">2</span>) </span><br></pre></td></tr></table></figure>

<ul>
<li><p>删：</p>
<p>&#x2F;&#x2F;根据限制条件删除内容</p>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">DELETE</span> <span class="keyword">FROM</span> `表` <span class="keyword">WHERE</span> 条件</span><br></pre></td></tr></table></figure>
</li>
<li><p>改：</p>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">UPDATE</span> `表` <span class="keyword">SET</span> 字段<span class="operator">=</span>值,字段<span class="number">2</span><span class="operator">=</span>值<span class="number">2.</span>.. <span class="keyword">WHERE</span> 条件</span><br></pre></td></tr></table></figure>
</li>
<li><p>查：（下面的查询语句可以组合一起用）</p>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `表`	<span class="operator">/</span><span class="operator">/</span>查询表中的所有值</span><br><span class="line"><span class="keyword">SELECT</span> 字段<span class="number">1</span>,字段<span class="number">2</span> <span class="keyword">FROM</span> `表` <span class="operator">/</span><span class="operator">/</span>只获取表中的某些字段</span><br><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `表` <span class="keyword">WHERE</span> 条件 <span class="operator">/</span><span class="operator">/</span>条件查询</span><br><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `表` <span class="keyword">WHERE</span> 条件 <span class="keyword">AND</span> 条件<span class="number">2</span><span class="operator">/</span><span class="operator">/</span>条件并列查询</span><br><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `表` <span class="keyword">WHERE</span> 条件 <span class="keyword">OR</span> 条件<span class="number">2</span><span class="operator">/</span><span class="operator">/</span>条件或者查询</span><br><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `表` <span class="keyword">ORDER</span> <span class="keyword">BY</span> `字段` <span class="keyword">ASC</span><span class="operator">/</span><span class="operator">/</span>条件升序查询</span><br><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `表` <span class="keyword">ORDER</span> <span class="keyword">BY</span> `字段` <span class="keyword">DESC</span><span class="operator">/</span><span class="operator">/</span>条件降序查询</span><br><span class="line"><span class="keyword">SELECT</span> <span class="operator">*</span> <span class="keyword">FROM</span> `表` LIMIT 开始索引,多少个 <span class="operator">/</span><span class="operator">/</span>分页查询</span><br></pre></td></tr></table></figure></li>
</ul>
<p><img src="/develop/imgs/image-20230313195142394.png" alt="image-20230313195142394"></p>
<h5 id="37-4登录逻辑实现"><a href="#37-4登录逻辑实现" class="headerlink" title="37.4登录逻辑实现"></a>37.4登录逻辑实现</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;&quot;</span> <span class="attr">name</span>=<span class="string">&quot;&quot;</span> <span class="attr">id</span>=<span class="string">&quot;username&quot;</span> <span class="attr">value</span>=<span class="string">&quot;&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;&quot;</span> <span class="attr">name</span>=<span class="string">&quot;&quot;</span> <span class="attr">id</span>=<span class="string">&quot;password&quot;</span> <span class="attr">value</span>=<span class="string">&quot;&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span> <span class="attr">name</span>=<span class="string">&quot;&quot;</span> <span class="attr">id</span>=<span class="string">&quot;submit&quot;</span> <span class="attr">value</span>=<span class="string">&quot;提交&quot;</span> /&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">			<span class="keyword">var</span> us = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#username&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">			<span class="keyword">var</span> ps = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#password&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">			<span class="keyword">var</span> sub = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#submit&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">			</span></span><br><span class="line"><span class="language-javascript">			sub.<span class="property">onclick</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">				<span class="keyword">const</span> usn = us.<span class="property">value</span></span></span><br><span class="line"><span class="language-javascript">				<span class="keyword">const</span> psw = ps.<span class="property">value</span></span></span><br><span class="line"><span class="language-javascript">				</span></span><br><span class="line"><span class="language-javascript">				<span class="keyword">if</span>(!usn || !psw) <span class="keyword">return</span></span></span><br><span class="line"><span class="language-javascript">				</span></span><br><span class="line"><span class="language-javascript">				<span class="keyword">const</span> data = <span class="string">`username=<span class="subst">$&#123;usn&#125;</span>&amp;password=<span class="subst">$&#123;psw&#125;</span>`</span></span></span><br><span class="line"><span class="language-javascript">				<span class="keyword">const</span> xhr = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>()</span></span><br><span class="line"><span class="language-javascript">				xhr.<span class="title function_">open</span>(<span class="string">&#x27;GET&#x27;</span>,<span class="string">&#x27;./login.php?&#x27;</span> + data)<span class="comment">//get方式请求数据</span></span></span><br><span class="line"><span class="language-javascript">				</span></span><br><span class="line"><span class="language-javascript">				xhr.<span class="property">onload</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">					<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">parse</span>(xhr.<span class="property">responseText</span>))</span></span><br><span class="line"><span class="language-javascript">				&#125;			</span></span><br><span class="line"><span class="language-javascript">				xhr.<span class="title function_">send</span>()</span></span><br><span class="line"><span class="language-javascript">			&#125;	</span></span><br><span class="line"><span class="language-javascript">		</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;?php</span></span><br><span class="line">	<span class="variable">$username</span> = <span class="variable">$_GET</span>[<span class="string">&#x27;username&#x27;</span>];</span><br><span class="line">	<span class="variable">$password</span> = <span class="variable">$_GET</span>[<span class="string">&#x27;password&#x27;</span>];</span><br><span class="line">	</span><br><span class="line">	<span class="variable">$sql</span> = <span class="string">&quot;SELECT * FROM `form1` WHERE `username`=&#x27;<span class="subst">$username</span>&#x27; AND `password`=&#x27;<span class="subst">$password</span>&#x27;&quot;</span>;</span><br><span class="line">	</span><br><span class="line">	<span class="variable">$link</span> = <span class="title function_ invoke__">mysqli_connect</span>(<span class="string">&#x27;localhost&#x27;</span>,<span class="string">&#x27;root&#x27;</span>,<span class="string">&#x27;123456&#x27;</span>,<span class="string">&#x27;ceshi&#x27;</span>);</span><br><span class="line">	<span class="variable">$res</span> = <span class="title function_ invoke__">mysqli_query</span>(<span class="variable">$link</span>,<span class="variable">$sql</span>);</span><br><span class="line">	</span><br><span class="line">	<span class="variable">$data</span> = <span class="title function_ invoke__">mysqli_fetch_all</span>(<span class="variable">$res</span>,MYSQLI_ASSOC);</span><br><span class="line">	</span><br><span class="line">	<span class="title function_ invoke__">mysqli_close</span>(<span class="variable">$link</span>);</span><br><span class="line">	</span><br><span class="line">	<span class="keyword">if</span>(<span class="title function_ invoke__">count</span>(<span class="variable">$data</span>))&#123;</span><br><span class="line">		<span class="variable">$arr</span> = [</span><br><span class="line">			<span class="string">&quot;message&quot;</span> =&gt; <span class="string">&quot;登录成功&quot;</span>,</span><br><span class="line">			<span class="string">&quot;code&quot;</span> =&gt; <span class="number">1</span>,</span><br><span class="line">			<span class="string">&quot;info&quot;</span> =&gt; <span class="variable">$data</span></span><br><span class="line">		];</span><br><span class="line">	&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">		<span class="variable">$arr</span> = [</span><br><span class="line">			<span class="string">&quot;message&quot;</span> =&gt; <span class="string">&quot;登录失败&quot;</span>,</span><br><span class="line">			<span class="string">&quot;code&quot;</span> =&gt; <span class="number">0</span>,</span><br><span class="line">			<span class="string">&quot;info&quot;</span> =&gt; <span class="variable">$data</span></span><br><span class="line">		];</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">echo</span> <span class="title function_ invoke__">json_encode</span>(<span class="variable">$arr</span>);</span><br><span class="line"><span class="meta">?&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src="/develop/imgs/image-20230313202846832.png" alt="image-20230313202846832"></p>
<p>​																						      	   <strong>数据库</strong>  </p>
<h4 id="38-cookie"><a href="#38-cookie" class="headerlink" title="38.cookie"></a>38.cookie</h4><h5 id="38-1cookie的特性（也是本地存储的一种）"><a href="#38-1cookie的特性（也是本地存储的一种）" class="headerlink" title="38.1cookie的特性（也是本地存储的一种）"></a>38.1cookie的特性（也是本地存储的一种）</h5><ol>
<li>cookie是根据域名存储的</li>
<li>cookie是客户端的一个存储空间</li>
<li>cookie必须依赖服务，本地打开的页面无法存取cookie</li>
<li>cookie的时效性默认是会话级别，关闭浏览器就没有，但可以手动设置</li>
<li>cookie的存储格式是key&#x3D;value;key&#x3D;value;</li>
<li>cookie会在页面发送请求的时候一起被携带</li>
<li>cookie空间的存储大小为4KB左右</li>
<li>前端是否从cookie拿数据由后端决定</li>
<li>前端可以通过js操作，后端语言都可以操作</li>
</ol>
<p>本地存储之间的区别：</p>
<ol>
<li>cookie是一直都有的，localStorage&#x2F;sessionStorage是H5标准下才有的</li>
<li>cookie大概是4KB左右，localStorage&#x2F;sessionStorage是20MB</li>
<li>cookie默认是会话级别，可以手动设置，localStorage（永久存储）&#x2F;sessionStorage（会话存储）由浏览器API固定好的，不能修改，</li>
<li>cookie内存储的数据会自动携带在请求头，localStorage&#x2F;sessionStorage不会自动携带，需要手动设置</li>
<li>cookie是可以前后端操作的，localStorage&#x2F;sessionStorage只能前端操作</li>
<li>服务端语言内有一个服务器存储空间，叫做session</li>
</ol>
<h5 id="38-2前端语言设置cookie-2023-x2F-3-x2F-14"><a href="#38-2前端语言设置cookie-2023-x2F-3-x2F-14" class="headerlink" title="38.2前端语言设置cookie 2023&#x2F;3&#x2F;14"></a>38.2前端语言设置cookie 2023&#x2F;3&#x2F;14</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//设置cookie</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">setCookie</span>(<span class="params">key,value,expires</span>)&#123;</span><br><span class="line">	<span class="keyword">if</span>(!expires) <span class="keyword">return</span> <span class="variable language_">document</span>.<span class="property">cookie</span> = <span class="string">`<span class="subst">$&#123;key&#125;</span>=<span class="subst">$&#123;value&#125;</span>;`</span></span><br><span class="line">	<span class="keyword">const</span> time = <span class="keyword">new</span> <span class="title class_">Date</span>()</span><br><span class="line">	time.<span class="title function_">setTime</span>(time.<span class="title function_">getTime</span>() -  <span class="number">1000</span> * <span class="number">60</span> * <span class="number">60</span> * <span class="number">8</span> + <span class="number">1000</span> * expires)</span><br><span class="line">	<span class="variable language_">document</span>.<span class="property">cookie</span> = <span class="string">`<span class="subst">$&#123;key&#125;</span>=<span class="subst">$&#123;value&#125;</span>;expires=<span class="subst">$&#123;time&#125;</span>`</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//获取cookie</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getCookie</span>(<span class="params">key</span>)&#123;</span><br><span class="line">	<span class="keyword">const</span> list = <span class="variable language_">document</span>.<span class="property">cookie</span>.<span class="title function_">split</span>(<span class="string">&#x27;; &#x27;</span>)</span><br><span class="line">	<span class="keyword">const</span> obj = &#123;&#125;</span><br><span class="line">	list.<span class="title function_">forEach</span>(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;</span><br><span class="line">		<span class="keyword">const</span> list2 = item.<span class="title function_">split</span>(<span class="string">&#x27;=&#x27;</span>)</span><br><span class="line">		<span class="keyword">const</span> k = list2[<span class="number">0</span>]</span><br><span class="line">		<span class="keyword">const</span> value = list2[<span class="number">1</span>]</span><br><span class="line">		obj[k] = value</span><br><span class="line">		<span class="variable language_">console</span>.<span class="title function_">log</span>(k)</span><br><span class="line">	&#125;)</span><br><span class="line">	<span class="keyword">return</span> key ? obj[key] : obj</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="38-3后端语言设置cookie"><a href="#38-3后端语言设置cookie" class="headerlink" title="38.3后端语言设置cookie"></a>38.3后端语言设置cookie</h5><p><img src="/develop/imgs/image-20230314160400651.png" alt="image-20230314160400651"></p>
<h5 id="38-4地址"><a href="#38-4地址" class="headerlink" title="38.4地址"></a>38.4地址</h5><ul>
<li><a target="_blank" rel="noopener" href="http://localhost/test">http://localhost:80/test</a>	</li>
<li>.&#x2F;test  &#x2F;&#x2F;同级地址</li>
<li>..&#x2F;test  &#x2F;&#x2F;上一级地址</li>
<li>&#x2F;test   &#x2F;&#x2F;绝对地址，根目录下的</li>
<li>test    &#x2F;&#x2F;同级地址</li>
</ul>
<p>用途：</p>
<ul>
<li>img的src</li>
<li>script的src</li>
<li>a的href</li>
<li>link的href</li>
<li>ajax的时候书写的请求地址</li>
</ul>
<h5 id="38-5同源策略"><a href="#38-5同源策略" class="headerlink" title="38.5同源策略"></a>38.5同源策略</h5><p>什么是同源策略？</p>
<p>当你在发送请求的时候，如果打开页面的完整地址和接受服务器的完整地址中只要<strong>域名</strong>，<strong>传输协议</strong>，或者<strong>端口号</strong>有任意一个不一样，就是触发了同源策略，服务器不允许你获取该服务器的数据。</p>
<p>跨域请求：请求非同源服务器的数据，我们管这种请求叫做跨域请求，常见的跨域请求解决方案有：1.jsonp 2.cors(跨域资源共享) 3.proxy(代理)</p>
<h5 id="38-6jsonp"><a href="#38-6jsonp" class="headerlink" title="38.6jsonp"></a>38.6jsonp</h5><p>是一个ajax技术无关的跨域方式，因为src属性只是标注引入一个外部资源的路径，script标签默认会把引入的内容当做js代码来执行。</p>
<p><strong>src属性的特点：</strong>src属性是专门用来引入外部资源的，浏览器不会去管src引入的内容是否跨域</p>
<p><strong>jsonp的实现方式：</strong>利用script标签的src属性，去请求一个<strong>非同源的服务器</strong>地址，实现要求是能给出一段合法可执行的js代码</p>
<h5 id="38-6搜索引擎"><a href="#38-6搜索引擎" class="headerlink" title="38.6搜索引擎"></a>38.6搜索引擎</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">			*&#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">padding</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">margin</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css">			<span class="selector-class">.inp</span>&#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">width</span>: <span class="number">80%</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">height</span>: <span class="number">100%</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">outline</span>: none;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">border</span>: none;</span></span><br><span class="line"><span class="language-css">				<span class="comment">/* box-sizing: border-box; */</span></span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css">			<span class="selector-class">.query</span>&#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">background-color</span>: <span class="number">#CCCCCC</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">color</span>: white;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">outline</span>: none;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">border</span>: none;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">flex</span>: <span class="number">1</span>;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css">			<span class="selector-class">.box</span>&#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">position</span>: relative;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">margin</span>: <span class="number">0</span> auto;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">width</span>: <span class="number">600px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">height</span>: <span class="number">60px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">display</span>: flex;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">border</span>: <span class="number">#000000</span> solid <span class="number">1px</span>;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css">			<span class="selector-class">.box</span> <span class="selector-tag">ul</span>&#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">padding</span>: <span class="number">20px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">box-sizing</span>: border-box;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">top</span>: <span class="number">100%</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">left</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">border-top</span>: none;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">border</span>: <span class="number">#333</span> solid <span class="number">1px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">width</span>: <span class="number">100%</span>;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css">			<span class="selector-class">.box</span> <span class="selector-tag">ul</span> <span class="selector-tag">li</span>&#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">list-style</span>: none;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">height</span>: <span class="number">30px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">line-height</span>: <span class="number">1</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">font-size</span>: <span class="number">20px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">cursor</span>: pointer;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css">			<span class="selector-class">.active</span>&#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">display</span>: none;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css">		</span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">input</span> <span class="attr">class</span>=<span class="string">&quot;inp&quot;</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">name</span>=<span class="string">&quot;&quot;</span> <span class="attr">id</span>=<span class="string">&quot;&quot;</span> <span class="attr">value</span>=<span class="string">&quot;&quot;</span> /&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;query&quot;</span>&gt;</span>查询<span class="tag">&lt;/<span class="name">button</span>&gt;</span>	</span><br><span class="line">				<span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">&quot;active&quot;</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">li</span>&gt;</span>1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">li</span>&gt;</span>2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">li</span>&gt;</span>3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">li</span>&gt;</span>4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">li</span>&gt;</span>5<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">li</span>&gt;</span>6<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">li</span>&gt;</span>7<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">li</span>&gt;</span>8<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">li</span>&gt;</span>9<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">li</span>&gt;</span>10<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">			<span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">res</span>)&#123;</span></span><br><span class="line"><span class="language-javascript">				<span class="keyword">var</span> ul = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;.box ul&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">				<span class="keyword">if</span>(!res.<span class="property">g</span>)&#123;</span></span><br><span class="line"><span class="language-javascript">					ul.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&#x27;active&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">					<span class="keyword">return</span></span></span><br><span class="line"><span class="language-javascript">				&#125; </span></span><br><span class="line"><span class="language-javascript">				<span class="keyword">var</span> str = <span class="string">&#x27;&#x27;</span></span></span><br><span class="line"><span class="language-javascript">				res.<span class="property">g</span>.<span class="title function_">forEach</span>(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;</span></span><br><span class="line"><span class="language-javascript">					str += 	<span class="string">`&lt;li&gt;<span class="subst">$&#123;item.q&#125;</span>&lt;/li&gt;`</span></span></span><br><span class="line"><span class="language-javascript">				&#125;)				</span></span><br><span class="line"><span class="language-javascript">				ul.<span class="property">innerHTML</span> = str</span></span><br><span class="line"><span class="language-javascript">				ul.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">&#x27;active&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">			&#125;</span></span><br><span class="line"><span class="language-javascript">		</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">			<span class="keyword">const</span> inp = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.inp&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">			<span class="keyword">var</span> ul = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;.box ul&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">			ul.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&#x27;active&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">			inp.<span class="property">oninput</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">				<span class="keyword">const</span> text = <span class="variable language_">this</span>.<span class="property">value</span>.<span class="title function_">trim</span>()	</span></span><br><span class="line"><span class="language-javascript">				<span class="keyword">const</span> script = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&#x27;script&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">				</span></span><br><span class="line"><span class="language-javascript">				script.<span class="property">src</span> = <span class="string">`https://www.baidu.com/sugrec?pre=1&amp;p=3&amp;ie=utf-8&amp;json=1&amp;prod=pc&amp;from=pc_web&amp;sugsid=38185,36560,37557,38106,38344,37861,38171,38290,38219,38262,37930,38316,38284,38041,26350,38282,37881&amp;wd=<span class="subst">$&#123; text &#125;</span>&amp;csor=2&amp;pwd=a&amp;cb=fn&amp;_=1678796006017`</span></span></span><br><span class="line"><span class="language-javascript">				<span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">appendChild</span>(script)</span></span><br><span class="line"><span class="language-javascript">				script.<span class="title function_">remove</span>()		</span></span><br><span class="line"><span class="language-javascript">			&#125;</span></span><br><span class="line"><span class="language-javascript">		</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span>	</span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h5 id="38-7cors跨域"><a href="#38-7cors跨域" class="headerlink" title="38.7cors跨域"></a>38.7cors跨域</h5><p>本身该怎么发送还是怎么发送，<strong>上网百度搜索相关后端语言对应的跨域代码贴到你要请求的代码头部</strong>即可，比较简单。</p>
<h5 id="38-8代理跨域（proxy"><a href="#38-8代理跨域（proxy" class="headerlink" title="38.8代理跨域（proxy)"></a>38.8代理跨域（proxy)</h5><p>这个的操作是让<strong>apache或者nginx</strong>进行服务器的代理，让客户端和代理服务器在同一个域内，这样子由客户端直接向代理服务器发送请求，然后再由<strong>代理服务器转送给需要请求的服务器获取</strong>数据（此时就不用考虑跨域请求失败的问题，因为服务器之间没有限制）</p>
<p>apache服务器（代理http免费，https请求要证书）</p>
<p>用小皮工具开启nginx服务器（代理http和https都是免费的）</p>
<p>处理跨域问题的方法有很多种，以下是一些常见的方法：</p>
<ol>
<li>使用代理服务器：在服务器端设置一个代理服务器，将客户端请求发送到目标服务器并返回响应，从而避免跨域问题。</li>
<li>JSONP：JSONP是一种利用<script>标签实现跨域的技术。在客户端页面上通过<script>标签引入一个由服务器端动态生成的JavaScript文件，该文件中包含了需要返回的数据，并在客户端回调函数中处理数据。</li>
<li>CORS：CORS是一种基于HTTP头部的机制，允许服务器端指定哪些源可以访问其资源。在服务器端设置Access-Control-Allow-Origin头部，指定允许跨域访问的源。</li>
<li>代表请求：在客户端请求时添加一个代表请求的服务器，让服务器端认为请求来自同源的服务器。</li>
</ol>
<p>以上是一些处理跨域问题的方法，具体的方法可以根据实际情况选择。</p>
<h4 id="39-瀑布流-高度不齐的瀑布流-3-24"><a href="#39-瀑布流-高度不齐的瀑布流-3-24" class="headerlink" title="39.瀑布流(高度不齐的瀑布流) 3/24"></a>39.瀑布流(高度不齐的瀑布流) 3/24</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        &lt;--! 解决引用图片资源权限不够的问题--&gt;</span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;&lt;referrer&quot;</span> <span class="attr">content</span>=<span class="string">&quot;no-referrer&quot;</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">			* &#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">padding</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">margin</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css">			<span class="selector-tag">ul</span>,</span></span><br><span class="line"><span class="language-css">			<span class="selector-tag">ol</span>,</span></span><br><span class="line"><span class="language-css">			<span class="selector-tag">li</span> &#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">list-style</span>: none;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css">			<span class="selector-class">.header</span>,</span></span><br><span class="line"><span class="language-css">			<span class="selector-class">.footer</span> &#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">background</span>: <span class="number">#87CEEB</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">width</span>: <span class="number">1200px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">height</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">margin</span>: <span class="number">0</span> auto;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">color</span>: white;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">font-size</span>: <span class="number">30px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">text-align</span>: center;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">line-height</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css">			<span class="selector-class">.body</span> &#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">padding</span>: <span class="number">2px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">width</span>: <span class="number">1200px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">margin</span>: <span class="number">0</span> auto;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">overflow</span>: hidden;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css">			<span class="selector-class">.body</span> <span class="selector-tag">ul</span> &#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">width</span>: <span class="number">23.1%</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">float</span>: left;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">margin</span>: <span class="number">0</span> <span class="number">10px</span>;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css">			<span class="selector-class">.body</span> <span class="selector-tag">ul</span> <span class="selector-tag">li</span> &#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">border</span>: <span class="number">#000000</span> solid <span class="number">1px</span>;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css">			<span class="selector-class">.body</span> <span class="selector-tag">ul</span> <span class="selector-tag">img</span> &#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">width</span>: <span class="number">100%</span>;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css">			<span class="selector-class">.body</span> <span class="selector-class">.info</span> <span class="selector-tag">img</span> &#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">border-radius</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">width</span>: <span class="number">30px</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">height</span>: <span class="number">30px</span>;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css">			<span class="selector-class">.info</span> &#123;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">margin</span>: <span class="number">7px</span> <span class="number">0</span> <span class="number">5px</span> <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css">				<span class="attribute">display</span>: flex;</span></span><br><span class="line"><span class="language-css">			&#125;</span></span><br><span class="line"><span class="language-css">		</span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- &lt;script src=&quot;https://cdn.jsdelivr.net/npm/pajax&quot;&gt;&lt;/script&gt; --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;header&quot;</span>&gt;</span>header<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;body&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;footer&quot;</span> <span class="attr">style</span>=<span class="string">&quot;bottom: 0;&quot;</span>&gt;</span>footer<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;./getPicture.js&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line">		<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">	<span class="attr">include_fields</span>: <span class="string">&#x27;like_count%2Csender%2Calbum%2Cmsg%2Creply_count%2Ctop_comments&#x27;</span>,</span><br><span class="line">	<span class="attr">kw</span>: <span class="string">&#x27;动漫&#x27;</span>,</span><br><span class="line">	<span class="attr">start</span>: <span class="number">0</span>,</span><br><span class="line">	<span class="attr">_</span>: <span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">getTime</span>()</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> flag = <span class="literal">true</span></span><br><span class="line"><span class="comment">// console.log(queryStringified)</span></span><br><span class="line"><span class="title function_">getPic</span>()</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getPic</span>(<span class="params"></span>) &#123;</span><br><span class="line">	<span class="comment">//将对象转换成查询字符串</span></span><br><span class="line">	<span class="keyword">const</span> queryStringified = <span class="title function_">queryStringify</span>(obj)</span><br><span class="line">	<span class="comment">//用ajax调用</span></span><br><span class="line">	<span class="keyword">let</span> xhr = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>()</span><br><span class="line">	<span class="comment">//用ngnix进行跨域调用</span></span><br><span class="line">	xhr.<span class="title function_">open</span>(<span class="string">&quot;GET&quot;</span>, <span class="string">&#x27;/dt&#x27;</span> + <span class="string">&#x27;?&#x27;</span> + queryStringified)</span><br><span class="line">	xhr.<span class="property">onload</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">		<span class="keyword">const</span> res = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(xhr.<span class="property">responseText</span>)</span><br><span class="line">		<span class="comment">//返回值后改掉下一个start的值</span></span><br><span class="line">		obj.<span class="property">start</span> = res.<span class="property">data</span>.<span class="property">next_start</span></span><br><span class="line">		<span class="variable language_">console</span>.<span class="title function_">log</span>(obj.<span class="property">start</span>)</span><br><span class="line">		/渲染页面</span><br><span class="line">		<span class="title function_">draw</span>(res.<span class="property">data</span>)</span><br><span class="line">	&#125;</span><br><span class="line">	xhr.<span class="title function_">send</span>()</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//将对象转换成查询字符串的函数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">queryStringify</span>(<span class="params">obj</span>) &#123;</span><br><span class="line">	<span class="keyword">var</span> str = <span class="string">&#x27;&#x27;</span></span><br><span class="line">	<span class="keyword">for</span> (<span class="keyword">var</span> i <span class="keyword">in</span> obj) &#123;</span><br><span class="line">		str += i + <span class="string">&#x27;=&#x27;</span> + obj[i] + <span class="string">&#x27;&amp;&#x27;</span> <span class="comment">//注意这里是对象的key值操作，不是数组的索引操作</span></span><br><span class="line">	&#125;</span><br><span class="line">	str = str.<span class="title function_">slice</span>(<span class="number">0</span>, -<span class="number">1</span>)</span><br><span class="line">	<span class="keyword">return</span> str</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//渲染页面</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">draw</span>(<span class="params">res</span>) &#123;</span><br><span class="line">	res.<span class="property">object_list</span>.<span class="title function_">forEach</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">		<span class="comment">//给图片提前填充大小让li有不同的高度，是为了解决瀑布流的这里高度无法对齐的问题</span></span><br><span class="line">		<span class="keyword">const</span> height = <span class="number">280</span> * item.<span class="property">photo</span>.<span class="property">height</span> / item.<span class="property">photo</span>.<span class="property">width</span></span><br><span class="line">		<span class="keyword">let</span> str = <span class="string">`&lt;li&gt;</span></span><br><span class="line"><span class="string">					&lt;img style=&quot;height:<span class="subst">$&#123;height&#125;</span>px;&quot; src=<span class="subst">$&#123;item.photo.path&#125;</span> /&gt;</span></span><br><span class="line"><span class="string">					&lt;div style=&quot;margin-left: 20px;&quot;&gt;</span></span><br><span class="line"><span class="string">						&lt;p&gt;<span class="subst">$&#123;item.msg&#125;</span>&lt;/p&gt;</span></span><br><span class="line"><span class="string">						&lt;svg t=&quot;1679563505300&quot; class=&quot;icon&quot; viewBox=&quot;0 0 1024 1024&quot; version=&quot;1.1&quot;</span></span><br><span class="line"><span class="string">							xmlns=&quot;http://www.w3.org/2000/svg&quot; p-id=&quot;1626&quot; width=&quot;12&quot; height=&quot;12&quot;&gt;</span></span><br><span class="line"><span class="string">							&lt;path</span></span><br><span class="line"><span class="string">								d=&quot;M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24zM551.786667 756.032l170.976 106.24c2.624 1.621333 5.717333 2.122667 8.650666 1.408 6.410667-1.557333 10.56-8.426667 8.928-15.424l-46.485333-198.24a77.141333 77.141333 0 0 1 24.277333-75.733333L870.293333 441.706667c2.485333-2.165333 4.053333-5.312 4.330667-8.746667 0.565333-7.136-4.490667-13.173333-10.976-13.696l-199.712-16.288a75.989333 75.989333 0 0 1-64.064-47.168l-76.938667-188.16a12.309333 12.309333 0 0 0-6.538666-6.741333c-5.898667-2.496-12.725333 0.373333-15.328 6.741333l-76.949334 188.16a75.989333 75.989333 0 0 1-64.064 47.168l-199.701333 16.288a11.68 11.68 0 0 0-7.978667 4.181333 13.226667 13.226667 0 0 0 1.333334 18.261334l152.16 132.586666a77.141333 77.141333 0 0 1 24.277333 75.733334l-46.485333 198.229333a13.333333 13.333333 0 0 0 1.514666 9.877333c3.488 5.792 10.581333 7.530667 16.064 4.128l170.986667-106.229333a75.296 75.296 0 0 1 79.562667 0z&quot;</span></span><br><span class="line"><span class="string">								fill=&quot;#000000&quot; p-id=&quot;1627&quot;&gt;&lt;/path&gt;</span></span><br><span class="line"><span class="string">						&lt;/svg&gt;</span></span><br><span class="line"><span class="string">						&lt;i style=&quot;font-style: normal;&quot;&gt;<span class="subst">$&#123;item.like_count&#125;</span>&lt;/i&gt;</span></span><br><span class="line"><span class="string">						&lt;div class=&quot;info&quot;&gt;</span></span><br><span class="line"><span class="string">							&lt;img src=&quot;<span class="subst">$&#123;item.sender.avatar&#125;</span>&quot;&gt;</span></span><br><span class="line"><span class="string">							&lt;p style=&quot;margin: 5px 0 0 10px;&quot;&gt;<span class="subst">$&#123;item.sender.username&#125;</span>&lt;/p&gt;</span></span><br><span class="line"><span class="string">						&lt;/div&gt;</span></span><br><span class="line"><span class="string">							&lt;p&gt;发布到 有点意思&lt;/p&gt;</span></span><br><span class="line"><span class="string">					&lt;/div&gt;</span></span><br><span class="line"><span class="string">				&lt;/li&gt;`</span></span><br><span class="line">		<span class="title function_">getMinUI</span>().<span class="property">innerHTML</span> += str</span><br><span class="line">	&#125;)</span><br><span class="line">	<span class="comment">//设置开关为开启，才不会重复获取渲染</span></span><br><span class="line">	flag = <span class="literal">true</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//得到最小的ul组件</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getMinUI</span>(<span class="params"></span>) &#123;</span><br><span class="line">	<span class="keyword">const</span> ulList = <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&#x27;ul&#x27;</span>)</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(ulList)</span><br><span class="line">	<span class="keyword">let</span> minUl = ulList[<span class="number">0</span>].<span class="property">offsetHeight</span></span><br><span class="line">	<span class="keyword">let</span> min = <span class="number">0</span></span><br><span class="line">	ulList.<span class="title function_">forEach</span>(<span class="function">(<span class="params">item, index</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (item.<span class="property">offsetHeight</span> &lt; minUl) &#123;</span><br><span class="line">			minUl = item.<span class="property">offsetHeight</span></span><br><span class="line">			min = index</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">	<span class="keyword">return</span> ulList[min]</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//监听window，滚动的幅度超过一定值后，开始渲染下一部分</span></span><br><span class="line"><span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;scroll&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">	<span class="keyword">const</span> scroll_top = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">scrollTop</span> || <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">scrollTop</span></span><br><span class="line">	<span class="keyword">const</span> window_height = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientHeight</span></span><br><span class="line">	<span class="keyword">const</span> min = <span class="title function_">getMinUI</span>()</span><br><span class="line">	<span class="keyword">const</span> ul_height = min.<span class="property">offsetHeight</span></span><br><span class="line">	<span class="keyword">const</span> ul_top = min.<span class="property">offsetTop</span></span><br><span class="line"></span><br><span class="line">	<span class="keyword">if</span> (scroll_top + window_height &lt;= ul_height + ul_top) <span class="keyword">return</span></span><br><span class="line"></span><br><span class="line">	<span class="keyword">if</span> (!flag) <span class="keyword">return</span></span><br><span class="line">	flag = <span class="literal">false</span></span><br><span class="line"></span><br><span class="line">	<span class="title function_">getPic</span>()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h4 id="40-函数"><a href="#40-函数" class="headerlink" title="40.函数"></a>40.函数</h4><h5 id="40-1函数的特点"><a href="#40-1函数的特点" class="headerlink" title="40.1函数的特点"></a>40.1函数的特点</h5><p>1.函数的特点-保护私有变量</p>
<ul>
<li>因为每一个函数会生成一个独立的私有作用域</li>
<li>在函数内定义的变量我们叫做私有变量</li>
<li>该变量只能在该函数作用域及下级作用域内使用</li>
</ul>
<p>2.函数定义时不解析变量</p>
<ul>
<li>函数定义的时候，函数体内的代码不执行</li>
<li>任何变量都不作解析</li>
<li>执行的时候才会解析变量</li>
</ul>
<p>3.函数的两个阶段</p>
<ul>
<li>函数定义阶段<ul>
<li>在堆内存中开辟一段存储空间</li>
<li>把函数体内的代码复制一份以字符串的形式放在空间内，此时不解析变量</li>
<li>把堆内存中的空间地址赋值给变量</li>
</ul>
</li>
<li>函数调用阶段<ul>
<li>按照变量名（函数名）内存储的地址找到堆内存中对应的空间</li>
<li>在调用栈内开辟一段新的函数执行空间</li>
<li>在新的执行空间内进行形参赋值</li>
<li>在新的执行空间内进行预解析</li>
<li>在新的执行空间内把函数体内的代码当作js代码执行一遍</li>
<li>把开辟在调用栈内的执行空间销毁</li>
</ul>
</li>
</ul>
<p><img src="/develop/imgs/image-20230324231408766.png" alt="image-20230324231408766"></p>
<h5 id="40-2不会销毁的内存空间"><a href="#40-2不会销毁的内存空间" class="headerlink" title="40.2不会销毁的内存空间"></a>40.2不会销毁的内存空间</h5><p>当这个函数返回一个<strong>复杂数据类型</strong>，并且在<strong>函数外部有变量接受的</strong>情况，像下面这种情况，返回一个复杂数据类型，就不能把调用栈中把函数执行空间销毁。</p>
<p><img src="/develop/imgs/image-20230324232541399.png" alt="image-20230324232541399"></p>
<h5 id="40-3闭包"><a href="#40-3闭包" class="headerlink" title="40.3闭包"></a>40.3闭包</h5><p>概念：函数内的函数</p>
<p>特点：1.延长变量的声明周期</p>
<ul>
<li>优点：变量声明周期延长了</li>
<li>缺点：需要一个闭包结构</li>
</ul>
<p>2.可以在函数外部访问函数内的私有变量</p>
<ul>
<li>优点：访问和使用变得更加灵活</li>
<li>缺点：需要一个闭包结构</li>
</ul>
<p>3.保护变量私有化</p>
<ul>
<li>优点：变量不会污染全局</li>
<li>缺点：外部没有办法使用，如果需要使用需要写一个闭包结构</li>
</ul>
<p>出现场景：</p>
<ul>
<li>需要一个不会销毁的函数执行空间</li>
<li>函数内<strong>直接或者间接返回一个新的函数</strong></li>
<li><strong>内部函数要使用外部函数的私有变量</strong></li>
<li>我们管内部函数（fnB）叫做外部函数（fnA）的<strong>闭包函数</strong></li>
</ul>
<p>这里会可能会出现内存泄露的问题，<strong>xss跨站脚步攻击</strong></p>
<h5 id="40-4闭包间接返回一个函数"><a href="#40-4闭包间接返回一个函数" class="headerlink" title="40.4闭包间接返回一个函数"></a>40.4闭包间接返回一个函数</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">outer</span>(<span class="params"></span>)&#123;</span><br><span class="line">	<span class="keyword">var</span> n  = <span class="number">1</span></span><br><span class="line">	<span class="keyword">var</span> s  = <span class="string">&#x27;hello world&#x27;</span></span><br><span class="line"><span class="comment">//准备一个对象数据结构</span></span><br><span class="line">	<span class="keyword">const</span> obj = &#123;</span><br><span class="line"></span><br><span class="line">​	<span class="attr">getN</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123; <span class="keyword">return</span> n &#125;</span><br><span class="line"></span><br><span class="line">​	<span class="attr">getS</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123; <span class="keyword">return</span> s &#125;</span><br><span class="line">&#125;</span><br><span class="line">	<span class="keyword">return</span> obj</span><br><span class="line">&#125;</span><br><span class="line">	<span class="keyword">const</span> res = <span class="title function_">outer</span>()</span><br><span class="line">    </span><br></pre></td></tr></table></figure>

<p><img src="/develop/imgs/image-20230325000814317.png" alt="image-20230325000814317"></p>
<h5 id="40-5闭包面试题"><a href="#40-5闭包面试题" class="headerlink" title="40.5闭包面试题"></a>40.5闭包面试题</h5><ol>
<li>变量的声明问题：如果在自己本身函数内没找到，就往函数外寻找，一直找到window为止，然后生成一个新的关于这个变量名的变量</li>
<li>闭包的存在是需要返回一个复杂数据类型，并且有存在在变量中，所以此时有保存和调用， 所以调用栈不会被销毁，此时在调用栈里被声明的变量（可能是通过形参开辟的变量，或者是在函数体内定义的变量），和声明的函数（有复杂数据类型的地址，跟浏览器的栈堆情况相同），同时每一次调用的时候，都会在调用栈里开辟一个新的执行空间。</li>
</ol>
<h5 id="40-6闭包补充"><a href="#40-6闭包补充" class="headerlink" title="40.6闭包补充"></a>40.6闭包补充</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//闭包 当返回的数据类型是复杂数据类型，则可以延长变量存在时间</span></span><br><span class="line">			<span class="keyword">function</span> <span class="title function_">f1</span>(<span class="params">i</span>)&#123;</span><br><span class="line">				<span class="keyword">let</span> num = <span class="number">10</span></span><br><span class="line">				addN = <span class="keyword">function</span> <span class="title function_">f2</span>(<span class="params"></span>)&#123;</span><br><span class="line">					i++</span><br><span class="line">				&#125;</span><br><span class="line">				<span class="keyword">return</span> <span class="keyword">function</span> (<span class="params"></span>)&#123;</span><br><span class="line">					<span class="keyword">let</span> a = <span class="number">3</span></span><br><span class="line">					<span class="variable language_">console</span>.<span class="title function_">log</span>(i + ++a)</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">			<span class="keyword">var</span> result = <span class="title function_">f1</span>(<span class="number">2</span>)</span><br><span class="line">			<span class="title function_">addN</span>() <span class="comment">//这里仍然能调用f1中的函数是因为声明规则，当声明的时候在作用域内找不到会一直向上查找，直到完全没有后创建，在全局创建则能在全局调用</span></span><br><span class="line">			<span class="title function_">result</span>(<span class="number">3</span>)</span><br></pre></td></tr></table></figure>

<h4 id="41-继承"><a href="#41-继承" class="headerlink" title="41.继承"></a>41.继承</h4><h5 id="41-1原型继承"><a href="#41-1原型继承" class="headerlink" title="41.1原型继承"></a>41.1原型继承</h5><p>用法：student.prototype = new Person('Jack',20) //子类的原型等于父类的构造</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params">name,age</span>)&#123;</span><br><span class="line">	<span class="variable language_">this</span>.<span class="property">name</span> = name</span><br><span class="line">	<span class="variable language_">this</span>.<span class="property">age</span> = age</span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">sayHi</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123; <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;hello&#x27;</span>)&#125;</span><br><span class="line"><span class="comment">/* const p = new Person(&#x27;jack&#x27;,18)</span></span><br><span class="line"><span class="comment">	p === &#123;</span></span><br><span class="line"><span class="comment">		name:&#x27;jack&#x27;,</span></span><br><span class="line"><span class="comment">		age:18,</span></span><br><span class="line"><span class="comment">		__proto__:Person.prototype&#123;</span></span><br><span class="line"><span class="comment">			sayHi:fn</span></span><br><span class="line"><span class="comment">			constructor:Person,</span></span><br><span class="line"><span class="comment">			__proto__:Object.prototype</span></span><br><span class="line"><span class="comment">		&#125;</span></span><br><span class="line"><span class="comment">	&#125;</span></span><br><span class="line"><span class="comment">	*/</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><img src="/develop/imgs/image-20230329213551839.png" alt="image-20230329213551839"></p>
<p><img src="/develop/imgs/image-20230329213715349.png" alt="image-20230329213715349"></p>
<p><img src="/develop/imgs/image-20230329213835827.png" alt="image-20230329213835827"></p>
<p><img src="/develop/imgs/image-20230329213826147.png" alt="image-20230329213826147"></p>
<p><img src="/develop/imgs/image-20230329214035622.png" alt="image-20230329214035622"></p>
<p><img src="/develop/imgs/image-20230329214157663.png" alt="image-20230329214157663"></p>
<p>省略....，就是_proto和prototype的关系</p>
<h5 id="41-2call继承"><a href="#41-2call继承" class="headerlink" title="41.2call继承"></a>41.2call继承</h5><p>call继承（借用继承/借用构造函数继承），利用call方法调用父类构造函数</p>
<p>优点：可以把继承来的属性直接出现在子类的实例上</p>
<p>缺点：只能继承构造函数体内书写的内容，构造函数的原型上的内容不能继承</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//构造函数也可以不用new来生成实例，可以直接使用构造函数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params">name,age</span>)&#123;</span><br><span class="line">	<span class="variable language_">this</span>.<span class="property">name</span> = name</span><br><span class="line">	<span class="variable language_">this</span>.<span class="property">age</span> = age</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">student</span>(<span class="params">gender,name,age</span>)&#123;</span><br><span class="line">	<span class="variable language_">this</span>.<span class="property">gender</span> = gender</span><br><span class="line">	<span class="comment">//这里是student的构造函数体内</span></span><br><span class="line">	<span class="comment">//这里的this是student的每个实例对象</span></span><br><span class="line">	<span class="comment">//利用call调用Person构造函数，把Person内的this修改为student的this</span></span><br><span class="line">	<span class="comment">//把Person内的this修改为student的每一个实例对象</span></span><br><span class="line">	<span class="title class_">Person</span>.<span class="title function_">call</span>(<span class="variable language_">this</span>,name,age)<span class="comment">//改变this指向为student的实例</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> s = <span class="keyword">new</span> <span class="title function_">student</span>(<span class="string">&#x27;男&#x27;</span>,<span class="string">&#x27;张三&#x27;</span>，<span class="number">20</span>)</span><br></pre></td></tr></table></figure>

<h5 id="41-3ES6继承（原型继承和call继承的结合）"><a href="#41-3ES6继承（原型继承和call继承的结合）" class="headerlink" title="41.3ES6继承（原型继承和call继承的结合）"></a>41.3ES6继承（原型继承和call继承的结合）</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//extends相当于原型继承</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">student</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Person</span>&#123;</span><br><span class="line">	<span class="title function_">constructor</span>(<span class="params">gender,name,age</span>)&#123;</span><br><span class="line">        <span class="comment">//super相当于call继承</span></span><br><span class="line">		<span class="variable language_">super</span>(name,age)</span><br><span class="line">		<span class="variable language_">this</span>.<span class="property">gender</span> = gender</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="title function_">play</span>(<span class="params"></span>)&#123;<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;xxxx&#x27;</span>)&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="42-单例模式"><a href="#42-单例模式" class="headerlink" title="42.单例模式"></a>42.单例模式</h4><p>当instance变成私有变量的时候，对inner（singleton）函数的使用没有影响，此时instance也不去污染全局变量空间</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//单例模式核心代码</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Person</span> = (<span class="keyword">function</span> <span class="title function_">outer</span>(<span class="params"></span>)&#123;</span><br><span class="line">	<span class="keyword">class</span> <span class="title class_">Person</span>&#123;</span><br><span class="line">		<span class="title function_">constructor</span>(<span class="params"></span>) &#123;</span><br><span class="line">            <span class="comment">//属于构造函数体内容</span></span><br><span class="line">            <span class="comment">//只有new Person的时候会执行</span></span><br><span class="line">            <span class="comment">//只要这里的内容执行了，必然会出现一个新的实例</span></span><br><span class="line">            <span class="comment">// 因为单例模式只能由一个实例，所以这里的代码只能执行一次，所以person类放到了构造函数内</span></span><br><span class="line">		    <span class="variable language_">this</span>.<span class="property">name</span> = <span class="string">&#x27;JACK&#x27;</span></span><br><span class="line">		&#125;</span><br><span class="line">		<span class="title function_">setName</span>(<span class="params">val</span>)&#123;</span><br><span class="line">			<span class="variable language_">this</span>.<span class="property">name</span> = val</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">let</span> instance = <span class="literal">null</span></span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">function</span> <span class="title function_">inner</span>(<span class="params">name</span>)&#123;</span><br><span class="line">		<span class="keyword">if</span>(!instance) instance = <span class="keyword">new</span> <span class="title class_">Person</span>()</span><br><span class="line">        <span class="comment">//传递进一个name属性，同时这里是闭包，让内部的函数能调用外部的函数（作用域的问题），因此在创建于一个实例的时候就自动调用理论setName()方法进行了name属性的修改</span></span><br><span class="line">		instance.<span class="title function_">setName</span>(name)</span><br><span class="line">		<span class="keyword">return</span> instance</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)()</span><br><span class="line"><span class="keyword">const</span> p1 = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&#x27;张三&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> p2 = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&#x27;李四&#x27;</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(p2 == p1)</span><br></pre></td></tr></table></figure>

<h5 id="304-397"><a href="#304-397" class="headerlink" title="304-397"></a>304-397</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br></pre></td><td class="code"><pre><span class="line">class Solution &#123;</span><br><span class="line"></span><br><span class="line">public:</span><br><span class="line"></span><br><span class="line">  int lengthOfLongestSubstring(string s) &#123;</span><br><span class="line"></span><br><span class="line">​    int num = 1;</span><br><span class="line"></span><br><span class="line">​    if(s.length() == 0) return 0;</span><br><span class="line"></span><br><span class="line">​    if(s.length() == 1) return 1;</span><br><span class="line"></span><br><span class="line">​    if(s.length() == 2 &amp;&amp; s[0] != s[1]) return 2;</span><br><span class="line"></span><br><span class="line">​    else return 1;</span><br><span class="line"></span><br><span class="line">​    for(int i = 0;i &lt; s.length();i++)&#123;</span><br><span class="line"></span><br><span class="line">​      for(int j = i+1;j &lt; s.length();j++)&#123;</span><br><span class="line"></span><br><span class="line">​        int temp = 1;</span><br><span class="line"></span><br><span class="line">​        if(s[i] == s[j])&#123;</span><br><span class="line"></span><br><span class="line">​          if(s[i] != s[i+1])&#123;</span><br><span class="line"></span><br><span class="line">​          int x = 0;</span><br><span class="line"></span><br><span class="line">​          if(s.length() - j &gt; j - i) x = s.length() - j;</span><br><span class="line"></span><br><span class="line">​          else x = j - i;</span><br><span class="line"></span><br><span class="line">​          for(int m = 1;m &lt; x ;m++)&#123;</span><br><span class="line"></span><br><span class="line">​            if(s[i+m] == s[m+j]) temp++;</span><br><span class="line"></span><br><span class="line">​          &#125;</span><br><span class="line"></span><br><span class="line">​          if(temp &lt; x) num = x;</span><br><span class="line"></span><br><span class="line">​        &#125;</span><br><span class="line"></span><br><span class="line">​        // else&#123;</span><br><span class="line"></span><br><span class="line">​        //   return s.length() - j;</span><br><span class="line"></span><br><span class="line">​        // &#125;   </span><br><span class="line"></span><br><span class="line">​        &#125;</span><br><span class="line"></span><br><span class="line">​        // else&#123;</span><br><span class="line"></span><br><span class="line">​        //   for(int u = j;j &lt; s.length();j++)&#123;</span><br><span class="line"></span><br><span class="line">​        //     if(s[u] == s[j]) return j-i+1;</span><br><span class="line"></span><br><span class="line">​        //   &#125;</span><br><span class="line"></span><br><span class="line">​        // &#125;</span><br><span class="line"></span><br><span class="line">​        // else if(temp &lt; 1)&#123;       </span><br><span class="line"></span><br><span class="line">​        //   temp = 1;         </span><br><span class="line"></span><br><span class="line">​        // &#125;</span><br><span class="line"></span><br><span class="line">​        if(temp &gt; num) num = temp; </span><br><span class="line"></span><br><span class="line">​      &#125;</span><br><span class="line"></span><br><span class="line">​    &#125;</span><br><span class="line"></span><br><span class="line">​    return num;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h4 id="43-Jquery"><a href="#43-Jquery" class="headerlink" title="43.Jquery"></a>43.Jquery</h4><p>jquery是封装DOM的类库，可以认为使得操作更加方便，在使用的时候需要导入jQuery.js，用$进行操作</p>
<h5 id="43-1Jquery发送ajax请求"><a href="#43-1Jquery发送ajax请求" class="headerlink" title="43.1Jquery发送ajax请求"></a>43.1Jquery发送ajax请求</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">$.<span class="title function_">ajax</span>(&#123;</span><br><span class="line">	<span class="attr">url</span>: <span class="string">&#x27;./server/01_test.php&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: <span class="string">&#x27;&#123;a:100,b:200&#125;&#x27;</span>, <span class="comment">//或者用查询字符串‘a=100&amp;b=200’</span></span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;GET&#x27;</span> <span class="comment">//选填，默认是get</span></span><br><span class="line">    <span class="attr">dataType</span>: <span class="string">&#x27;json&#x27;</span> <span class="comment">//表示是否解析后端返回的数据，默认是不解析</span></span><br><span class="line">    <span class="attr">success</span>: <span class="keyword">function</span>(<span class="params">res</span>)&#123;<span class="variable language_">console</span>.<span class="title function_">log</span>(res)&#125;, <span class="comment">//成功的回调函数</span></span><br><span class="line">    <span class="comment">//async: false 是否异步，默认是true</span></span><br><span class="line">    还有<span class="title function_">error</span>(失败回调)，<span class="title function_">timeout</span>(超时)，<span class="title function_">cache</span>(是否缓存)，<span class="title function_">context</span>(回调函数内的<span class="variable language_">this</span>指向)，<span class="title function_">headers</span>(请求头，当需要独立书写请求头的时候可以在这里书写，值默认是对象数据类型)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$.get(url,data,function,&#x27;json&#x27;)//jquery中专门用来发送get请求的函数</span><br></pre></td></tr></table></figure>

<h5 id="43-2Jquery发送jsonp请求"><a href="#43-2Jquery发送jsonp请求" class="headerlink" title="43.2Jquery发送jsonp请求"></a>43.2Jquery发送jsonp请求</h5><p>jsonp原理</p>
<p>利用script标签能把请求回来的内容当作js代码执行</p>
<p>利用src不受同源策略的影响</p>
<p>要求：</p>
<ul>
<li><p>后端返回的是一个可以执行的合法的js代码</p>
</li>
<li><p>后端返回的内容是一个‘函数名（数据）'这样的字符串</p>
</li>
<li><p>前端在发送请求的时候，把准备好的函数名发到后端</p>
</li>
</ul>
<p>jsonpcallback: 表示函数名，默认是jquery自己组装的名字，在success回调后自动调用写好的函数，然后执行里面的代码。</p>
<p>jsonp: 表示给后端传递回调函数名的字段，默认是callback，callback是一个回调函数的缩写，指的是在某些编程语言中，当某个事件触发时，会执行一个指定的函数。在这个例子中，$_GET['callback']是一个参数，它指定了在返回JSON数据时要调用的回调函数的名称。当服务器返回JSON数据时，会自动调用这个回调函数并将JSON数据作为参数传递给它。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;./jquery-3.6.4.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">			$.<span class="title function_">ajax</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">				<span class="attr">url</span>:<span class="string">&#x27;json_ajax.php&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">				<span class="attr">dataType</span>: <span class="string">&#x27;jsonp&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">				<span class="attr">success</span>: <span class="keyword">function</span>(<span class="params">res</span>) &#123;<span class="variable language_">console</span>.<span class="title function_">log</span>(res)&#125;</span></span><br><span class="line"><span class="language-javascript">			&#125;)</span></span><br><span class="line"><span class="language-javascript">			</span></span><br><span class="line"><span class="language-javascript">		</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;?php</span></span><br><span class="line">	<span class="variable">$cb</span> = <span class="variable">$_GET</span>[<span class="string">&#x27;callback&#x27;</span>];</span><br><span class="line">	<span class="variable">$arr</span> = [</span><br><span class="line">		<span class="string">&quot;message&quot;</span> =&gt; <span class="string">&quot;hello world&quot;</span>,</span><br><span class="line">		<span class="string">&quot;tip&quot;</span> =&gt; <span class="string">&quot;我是一个json&quot;</span>格式数据,</span><br><span class="line">		<span class="string">&quot;data&quot;</span> =&gt; <span class="variable">$_GET</span></span><br><span class="line">	];</span><br><span class="line">	<span class="variable">$json</span> = <span class="title function_ invoke__">json_encode</span>(<span class="variable">$arr</span>);</span><br><span class="line">	<span class="keyword">echo</span> <span class="string">&quot;<span class="subst">$cb</span>(<span class="subst">$json</span>)&quot;</span>;</span><br><span class="line"><span class="meta">?&gt;</span></span><br></pre></td></tr></table></figure>

<p>先把jquery进行跳过（感觉没必要去学习）</p>
<h4 id="44-深浅拷贝"><a href="#44-深浅拷贝" class="headerlink" title="44.深浅拷贝"></a>44.深浅拷贝</h4><p>浅拷贝是利用当数据类型不是复杂数据类型的时候，存储的数据是带值返回的，而不是带地址返回，因此即使是用一个数据对另一个数据进行赋值，在修改其中一个数据的时候也会同步改变另外一个变量的值。因此深拷贝有两种方法进行实现，一种是递归，一种是json字符串</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line">递归法：<span class="keyword">let</span> o1 = &#123;</span><br><span class="line">	<span class="attr">name</span>: <span class="string">&#x27;Jack&#x27;</span>,</span><br><span class="line">	<span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">	<span class="attr">info</span>: &#123;</span><br><span class="line">		<span class="attr">weight</span>: <span class="number">100</span>,</span><br><span class="line">		<span class="attr">height</span>: <span class="number">100</span>,</span><br><span class="line">		<span class="attr">desc</span>: &#123;</span><br><span class="line">			<span class="attr">msg</span>: <span class="string">&#x27;lan&#x27;</span>,</span><br><span class="line">			<span class="attr">title</span>: <span class="string">&#x27;Nih&#x27;</span>,</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">hobby</span>: [<span class="string">&#x27;吃饭&#x27;</span>,<span class="string">&#x27;睡觉&#x27;</span>,[<span class="string">&#x27;对对对&#x27;</span>,<span class="string">&#x27;打嗝&#x27;</span>]]</span><br><span class="line">	</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> o2 = &#123;&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">deepCopy</span>(<span class="params">o1,o2</span>)&#123;</span><br><span class="line">	<span class="keyword">for</span>(<span class="keyword">let</span> k <span class="keyword">in</span> o1)&#123;</span><br><span class="line">		<span class="keyword">if</span>(<span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(o1[k]) === <span class="string">&quot;[object Object]&quot;</span>)&#123;</span><br><span class="line">			o2[k] = &#123;&#125;</span><br><span class="line">			<span class="title function_">deepCopy</span>(o1[k],o2[k])</span><br><span class="line">		&#125;<span class="keyword">else</span> <span class="keyword">if</span>(<span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(o1[k]) === <span class="string">&quot;[object Array]&quot;</span>)&#123;</span><br><span class="line">			o2[k] = []</span><br><span class="line">			<span class="title function_">deepCopy</span>(o1[k],o2[k])</span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			o2[k] = o1[k]</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">deepCopy</span>(o1,o2)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(o2)</span><br><span class="line"><span class="title class_">JSON</span>法：</span><br><span class="line"><span class="keyword">let</span> o3 = <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(o1)</span><br><span class="line">o3 = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(o3)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(o3)</span><br></pre></td></tr></table></figure>

<h4 id="45-图片懒加载"><a href="#45-图片懒加载" class="headerlink" title="45.图片懒加载"></a>45.图片懒加载</h4><p>避免在一开始的时候就直接加载较多张的图片，造成带宽的拥挤，因此需要引入预加载的机制</p>
<p>图片的预加载的原理是通过判断<strong>视窗高度+卷过高度>图片距离顶部的距离</strong>，如果符合要求就进行预加载</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> ul = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;ul&#x27;</span>)</span><br><span class="line">			<span class="title function_">bindHtml</span>()</span><br><span class="line">			<span class="keyword">function</span> <span class="title function_">bindHtml</span>(<span class="params"></span>)&#123;</span><br><span class="line">				<span class="keyword">let</span> str = <span class="string">&#x27;&#x27;</span></span><br><span class="line">				list.<span class="title function_">forEach</span>(item = &gt; &#123;</span><br><span class="line">					str += <span class="string">`&lt;li&gt;&lt;img data-src=&quot;<span class="subst">$&#123;item.pic&#125;</span>&quot;/&gt;&lt;/li&gt;`</span> <span class="comment">//这里使用data-src是为了先把图片的地址嵌入但不进行显示，后面再通过这里进行提取</span></span><br><span class="line">				&#125;)</span><br><span class="line">				ul.<span class="property">innerHTML</span> = str</span><br><span class="line">				<span class="title function_">lazyload</span>()</span><br><span class="line">			&#125;</span><br><span class="line">			</span><br><span class="line">			<span class="keyword">function</span> <span class="title function_">lazyload</span>(<span class="params"></span>)&#123;</span><br><span class="line">				<span class="keyword">const</span> imgs = ul.<span class="title function_">querySelectorAll</span>(<span class="string">&#x27;img&#x27;</span>)</span><br><span class="line">				imgs.<span class="title function_">forEach</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">					</span><br><span class="line">					<span class="keyword">if</span>(item.<span class="property">src</span>) <span class="keyword">return</span></span><br><span class="line">					<span class="keyword">const</span> img_top = item.<span class="property">offsetTop</span></span><br><span class="line">					<span class="keyword">const</span> window_height = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientHeight</span></span><br><span class="line">					<span class="keyword">const</span> scroll_top = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">scrollTop</span> || <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">scrollTop</span></span><br><span class="line">					<span class="comment">//视窗高度+卷过高度&gt;图片距离顶部的距离</span></span><br><span class="line">					<span class="keyword">if</span>(img_top - <span class="number">50</span> &lt;= window_height + scroll_top)&#123;</span><br><span class="line">						item.<span class="property">src</span> = item.<span class="property">dataset</span>.<span class="property">src</span></span><br><span class="line">					&#125;</span><br><span class="line">				&#125;)</span><br><span class="line">			&#125;</span><br></pre></td></tr></table></figure>

<h4 id="46-函数节流和防抖"><a href="#46-函数节流和防抖" class="headerlink" title="46.函数节流和防抖"></a>46.函数节流和防抖</h4><p>用于如在搜索的时候，用户一般只要搜索输入的最后一个结果，如果提前进行渲染会浪费服务器资源，因此最好是增加节流或者防抖机制，减少渲染时资源的浪费。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> inp = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;input&#x27;</span>)</span><br><span class="line"><span class="number">1.</span>函数节流</span><br><span class="line"><span class="keyword">let</span> flag = <span class="literal">true</span></span><br><span class="line">inp.<span class="property">oninput</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">if</span>(!flag) <span class="keyword">return</span></span><br><span class="line">    flag = <span class="literal">false</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`我要搜索的内容是<span class="subst">$&#123;<span class="variable language_">this</span>.value&#125;</span>`</span>)</span><br><span class="line">    <span class="built_in">setTimeout</span>&#123;<span class="function">()=&gt;</span>flag = <span class="literal">true</span>,<span class="number">300</span>&#125; <span class="comment">//每次都等待300毫秒才执行</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="number">2.</span>函数防抖</span><br><span class="line"><span class="keyword">let</span> time = <span class="literal">null</span></span><br><span class="line">inp.<span class="property">oninput</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">	<span class="built_in">clearInterval</span>(timer)</span><br><span class="line">	timer = <span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">	  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`我要搜索的内容是<span class="subst">$&#123;<span class="variable language_">this</span>.value&#125;</span>`</span>，<span class="number">300</span>) <span class="comment">//这里由于timer存在，因此清楚的时候就会把timer给去掉，导致延后输出没有执行，直到没有清除的时候</span></span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="47-node"><a href="#47-node" class="headerlink" title="47.node"></a>47.node</h3><p>node是一种后端js语言，是用来只执行js代码的，因为js不能单独执行，所以有了node</p>
<h5 id="47-1fs模块"><a href="#47-1fs模块" class="headerlink" title="47.1fs模块"></a>47.1fs模块</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>) <span class="comment">//引入fs模块</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;start&#x27;</span>)</span><br><span class="line"><span class="comment">//异步调用读取文件，fs模块是node自带</span></span><br><span class="line"><span class="comment">//第二个参数默认是buffer,选填&#x27;utf-8&#x27;</span></span><br><span class="line">fs.<span class="title function_">readFile</span>(<span class="string">&#x27;./test.txt&#x27;</span>,<span class="string">&#x27;utf-8&#x27;</span>,<span class="function">(<span class="params">err,data</span>)=&gt;</span>&#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(data)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//同步读取文件内容(文件路径，格式)</span></span><br><span class="line"><span class="keyword">const</span> res = fs.<span class="title function_">readFileSync</span>(<span class="string">&#x27;./test.txt&#x27;</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;end&#x27;</span>)</span><br><span class="line"><span class="comment">//fs.writeFile(文件路径，写入的内容，回调函数) 异步写入文件</span></span><br><span class="line"><span class="comment">//fs.writeFileSync(文件路径，写入的内容) 同步写入</span></span><br></pre></td></tr></table></figure>

<h5 id="47-2path模块"><a href="#47-2path模块" class="headerlink" title="47.2path模块"></a>47.2path模块</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line">path.<span class="title function_">join</span>(路径片段<span class="number">1</span>，路径片段<span class="number">2</span>，...) <span class="comment">//把需要的路径组装成一个相对路径信息</span></span><br><span class="line">path.<span class="title function_">resolve</span>(路径片段<span class="number">1</span>，路径片段<span class="number">2</span>，...) <span class="comment">//组装成绝对路径</span></span><br></pre></td></tr></table></figure>

<h5 id="47-3http模块"><a href="#47-3http模块" class="headerlink" title="47.3http模块"></a>47.3http模块</h5><p>http模块是用来书写后端服务器的</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> http = <span class="built_in">require</span>(<span class="string">&#x27;http&#x27;</span>)</span><br><span class="line"><span class="comment">//这里是异步</span></span><br><span class="line"><span class="keyword">const</span> server = http.<span class="title function_">createServer</span>(<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123;</span><br><span class="line">	<span class="comment">//函数接收两个参数，一个是request，表示本次请求的所有信息</span></span><br><span class="line">	<span class="comment">//一个是response，表示本次响应的所有内容</span></span><br><span class="line">	<span class="keyword">const</span> url = req.<span class="property">url</span> <span class="comment">//获取请求的url</span></span><br><span class="line">	<span class="keyword">const</span> method = req.<span class="property">method</span> <span class="comment">//获取请求方法</span></span><br><span class="line">	<span class="keyword">if</span>(method === <span class="string">&#x27;GET&#x27;</span> &amp;&amp; url === <span class="string">&#x27;/test/first&#x27;</span>)&#123;</span><br><span class="line">		res.<span class="title function_">end</span>(<span class="string">&#x27;hello world&#x27;</span>)</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span>(method === <span class="string">&#x27;GET&#x27;</span> &amp;&amp; url === <span class="string">&#x27;/test/second&#x27;</span>)&#123;</span><br><span class="line">		res.<span class="title function_">end</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(&#123;<span class="attr">name</span>:<span class="string">&#x27;jack&#x27;</span>,<span class="attr">age</span>:<span class="string">&#x27;18&#x27;</span>&#125;))</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">11</span>) <span class="comment">//每次调用的时候会执行</span></span><br><span class="line">&#125;)</span><br><span class="line">server.<span class="title function_">listen</span>(<span class="number">8080</span>,<span class="function">()=&gt;</span><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;正在监听8080端口&#x27;</span>))</span><br></pre></td></tr></table></figure>

<h5 id="47-4简易服务器"><a href="#47-4简易服务器" class="headerlink" title="47.4简易服务器"></a>47.4简易服务器</h5><p>正常做法是用选择器进行多段的匹配</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> http = <span class="built_in">require</span>(<span class="string">&#x27;http&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> server = http.<span class="title function_">createServer</span>(<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123;</span><br><span class="line">	<span class="comment">//函数接收两个参数，一个是request，表示本次请求的所有信息</span></span><br><span class="line">	<span class="comment">//一个是response，表示本次响应的所有内容</span></span><br><span class="line">	<span class="keyword">const</span> &#123; url , method &#125; = req </span><br><span class="line">	<span class="keyword">const</span> reg = <span class="regexp">/(\.html|\.css|\.js)$/i</span> <span class="comment">//匹配最后的后缀名为html,css,js的网址，并且识别大小写</span></span><br><span class="line">	<span class="keyword">if</span>(method === <span class="string">&#x27;GET&#x27;</span> &amp;&amp; url === <span class="string">&#x27;/index.html&#x27;</span>)&#123;</span><br><span class="line">		fs.<span class="title function_">readFile</span>(<span class="string">&#x27;./index.html&#x27;</span>,<span class="function">(<span class="params">err,data</span>)=&gt;</span>&#123;</span><br><span class="line">			<span class="keyword">if</span>(err) <span class="keyword">return</span> <span class="variable language_">console</span>.<span class="title function_">log</span>(err)</span><br><span class="line">			res.<span class="title function_">end</span>(data)</span><br><span class="line">		&#125;)</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span>(method === <span class="string">&#x27;GET&#x27;</span> &amp;&amp; url === <span class="string">&#x27;/login.html&#x27;</span>)&#123;</span><br><span class="line">		fs.<span class="title function_">readFile</span>(<span class="string">&#x27;./login.html&#x27;</span>,<span class="function">(<span class="params">err,data</span>)=&gt;</span>&#123;</span><br><span class="line">			<span class="keyword">if</span>(err) <span class="keyword">return</span> <span class="variable language_">console</span>.<span class="title function_">log</span>(err)</span><br><span class="line">			res.<span class="title function_">end</span>(data)</span><br><span class="line">		&#125;)</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line">server.<span class="title function_">listen</span>(<span class="number">8080</span>,<span class="function">()=&gt;</span><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;正在监听8080端口&#x27;</span>))</span><br></pre></td></tr></table></figure>

<p>第二种做法是进行正则字符匹配，然后进行截断获取</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> http = <span class="built_in">require</span>(<span class="string">&#x27;http&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> server = http.<span class="title function_">createServer</span>(<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123;</span><br><span class="line">	<span class="comment">//函数接收两个参数，一个是request，表示本次请求的所有信息</span></span><br><span class="line">	<span class="comment">//一个是response，表示本次响应的所有内容</span></span><br><span class="line">	<span class="keyword">const</span> &#123; url , method &#125; = req </span><br><span class="line">	<span class="keyword">const</span> reg = <span class="regexp">/\/(.+)(\.html|\.css|\.js)$/i</span> <span class="comment">//这里的(.+)是为了适配文件在文件夹中</span></span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(url)</span><br><span class="line">	<span class="keyword">if</span>(method === <span class="string">&#x27;GET&#x27;</span>)&#123;</span><br><span class="line">		<span class="keyword">const</span> result = reg.<span class="title function_">exec</span>(url) <span class="comment">//正则的结果捕获</span></span><br><span class="line">		<span class="keyword">const</span> extname = result ? result[<span class="number">2</span>] : <span class="string">&#x27;.html&#x27;</span></span><br><span class="line">		<span class="comment">//extname 要么是.html,要么是.css或者.js</span></span><br><span class="line">		<span class="keyword">let</span> pathUrl = <span class="string">&#x27;./view&#x27;</span></span><br><span class="line">		<span class="keyword">if</span>(extname === <span class="string">&#x27;.css&#x27;</span>) pathUrl = <span class="string">&#x27;./css&#x27;</span> <span class="comment">//如果是css文件的请求就到css文件夹找</span></span><br><span class="line">		<span class="keyword">if</span>(extname === <span class="string">&#x27;.js&#x27;</span>) pathUrl = <span class="string">&#x27;./js&#x27;</span></span><br><span class="line">		pathUrl += url</span><br><span class="line">		fs.<span class="title function_">readFile</span>(pathUrl,<span class="function">(<span class="params">err,data</span>)=&gt;</span>&#123; <span class="comment">//读取文件并返回值</span></span><br><span class="line">			<span class="keyword">if</span>(err)&#123;</span><br><span class="line">				fs.<span class="title function_">readFile</span>(<span class="string">&#x27;./view/404.html&#x27;</span>,<span class="function">(<span class="params">e,d</span>)=&gt;</span>&#123;</span><br><span class="line">					res.<span class="title function_">end</span>(d) <span class="comment">//把得到的结果输出到前端</span></span><br><span class="line">				&#125;)</span><br><span class="line">			&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">				res.<span class="title function_">end</span>(data)</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;)</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line">server.<span class="title function_">listen</span>(<span class="number">8080</span>,<span class="function">()=&gt;</span><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;正在监听8080端口&#x27;</span>))</span><br></pre></td></tr></table></figure>

<h5 id="47-5-nodemailer模组"><a href="#47-5-nodemailer模组" class="headerlink" title="47.5 nodemailer模组"></a>47.5 nodemailer模组</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//引入邮差模组</span></span><br><span class="line"><span class="keyword">const</span> nodemailer = <span class="built_in">require</span>(<span class="string">&#x27;nodemailer&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 在node_modules中的nodemailer下lib/well-know/service.json 获取对应邮箱格式</span></span><br><span class="line"><span class="comment">// 创建一个邮差</span></span><br><span class="line"><span class="keyword">let</span> transporter = nodemailer.<span class="title function_">createTransport</span>(&#123;</span><br><span class="line">    <span class="attr">host</span>: <span class="string">&quot;smtp.qq.com&quot;</span>,</span><br><span class="line">    <span class="attr">port</span>: <span class="number">465</span>,</span><br><span class="line">    <span class="attr">secure</span>: <span class="literal">true</span>, <span class="comment">// true for 465, false for other ports</span></span><br><span class="line">    <span class="attr">auth</span>: &#123;</span><br><span class="line">      <span class="attr">user</span>: <span class="string">&#x27;863188474@qq.com&#x27;</span>, <span class="comment">// generated ethereal user</span></span><br><span class="line">      <span class="attr">pass</span>: <span class="string">&#x27;ytzwgbhqevnwbbai&#x27;</span>, <span class="comment">// generated ethereal password</span></span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;);</span><br><span class="line"><span class="comment">// 需要发送的信息为：</span></span><br><span class="line"><span class="keyword">const</span> info = &#123;</span><br><span class="line">	<span class="attr">from</span>: <span class="string">&#x27;863188474@qq.com&#x27;</span>, <span class="comment">// sender address</span></span><br><span class="line">	<span class="attr">to</span>: <span class="string">&quot;863188474@qq.com&quot;</span>, <span class="comment">// list of receivers</span></span><br><span class="line">	<span class="attr">subject</span>: <span class="string">&quot;Hello ✔&quot;</span>, <span class="comment">// Subject line</span></span><br><span class="line">	<span class="attr">text</span>: <span class="string">&quot;验证码&quot;</span>, <span class="comment">// plain text body</span></span><br><span class="line">	<span class="attr">html</span>: <span class="string">`&lt;h1&gt;验证码为：&lt;span style=&quot;color: red;&quot;&gt;1234&lt;/span&gt;&lt;/h1&gt;`</span>, <span class="comment">// html body</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">transporter.<span class="title function_">sendMail</span>(info) <span class="comment">//可以写回调函数也可以不写</span></span><br></pre></td></tr></table></figure>

<h4 id="46-sass"><a href="#46-sass" class="headerlink" title="46.sass"></a>46.sass</h4><h5 id="46-1-sass安装"><a href="#46-1-sass安装" class="headerlink" title="46.1 sass安装"></a>46.1 sass安装</h5><p>全局安装： npm install --global sass</p>
<ol>
<li>单文件编译，切换到要编译的sass文件的目录 => 指令：<strong>sass 源文件名称 生成的文件名称</strong></li>
<li>单文件实时编译 => 指令： <strong>sass --watch  源文件名称:生成文件名称</strong></li>
<li>文件夹实时编译 => 指令： <strong>sass --watch  源文件夹名称:生成的文件夹名称</strong></li>
</ol>
<h5 id="46-2-sass的变量"><a href="#46-2-sass的变量" class="headerlink" title="46.2 sass的变量"></a>46.2 sass的变量</h5><p>变量的声明格式: <strong>$变量名:属性</strong></p>
<p>变量的使用:1.使用在值的位置直接使用即可</p>
<p>2.使用在选择器的位置不能直接使用，需要写**#{变量}**</p>
<p><strong>如：li:nth-child(10){ color:red}</strong></p>
<p><a target="_blank" rel="noopener" href="https://www.zhihu.com/education/video-course/1487063041006718976?section_id=1487070789279670272">Javascript 随堂教程 - 知学堂 (zhihu.com)</a></p>
<p><a target="_blank" rel="noopener" href="https://www.ermao.net/skill/freeresource/">免费资源汇总23-2-26更新 - 二猫子 (ermao.net)</a></p>
<p><a target="_blank" rel="noopener" href="https://www.ermao.net/resource/vpn/">2023年便宜好用的翻墙机场推荐评测(长期更新 欢迎推荐) - 二猫子 (ermao.net)</a></p>
<p><a target="_blank" rel="noopener" href="https://w1.v2free.top/doc/#/Android/v2free">V2free 教程</a>F</p>

  </div>
</article>



        
          <div id="footer-post-container">
  <div id="footer-post">

    <div id="nav-footer" style="display: none">
      <ul>
        
          <li><a href="/develop/">Home</a></li>
        
          <li><a href="/develop/about/">About</a></li>
        
          <li><a href="/develop/archives/">Writing</a></li>
        
          <li><a target="_blank" rel="noopener" href="http://github.com/probberechts">Projects</a></li>
        
      </ul>
    </div>

    <div id="toc-footer" style="display: none">
      <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9F%A5%E4%B9%8E%EF%BC%9AJS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A"><span class="toc-number">1.</span> <span class="toc-text">知乎：JS零基础入门到精通</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E4%BB%80%E4%B9%88%E6%98%AFjs%EF%BC%9F-2023-x2F-1-x2F-26"><span class="toc-number">1.1.</span> <span class="toc-text">1.什么是js？ 2023&#x2F;1&#x2F;26</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-js%E4%BB%A3%E7%A0%81%E7%9A%84%E4%B9%A6%E5%86%99%E4%BD%8D%E7%BD%AE"><span class="toc-number">1.2.</span> <span class="toc-text">2.js代码的书写位置</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-js%E5%AE%9A%E4%B9%89%E5%8F%98%E9%87%8F"><span class="toc-number">1.3.</span> <span class="toc-text">3.js定义变量</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E8%BE%93%E5%87%BA%E8%AF%AD%E6%B3%95"><span class="toc-number">1.4.</span> <span class="toc-text">4.输出语法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E4%B8%8E%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E7%9A%84%E6%A3%80%E6%B5%8B"><span class="toc-number">1.5.</span> <span class="toc-text">5.数据类型与数据类型的检测</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6-%E6%95%B0%E5%80%BC%E8%BD%AC%E6%8D%A2"><span class="toc-number">1.6.</span> <span class="toc-text">6.数值转换</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#6-1%E8%BD%AC%E6%95%B0%E5%AD%97"><span class="toc-number">1.6.1.</span> <span class="toc-text">6.1转数字</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#6-2%E8%BD%AC%E6%96%87%E6%9C%AC"><span class="toc-number">1.6.2.</span> <span class="toc-text">6.2转文本**</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#6-3%E8%BD%AC%E5%B8%83%E5%B0%94"><span class="toc-number">1.6.3.</span> <span class="toc-text">6.3转布尔</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7-arguments-1-x2F-28"><span class="toc-number">1.7.</span> <span class="toc-text">7.arguments  1&#x2F;28</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#8-%E4%BD%9C%E7%94%A8%E5%9F%9F%E7%9A%84%E6%9C%BA%E5%88%B6"><span class="toc-number">1.8.</span> <span class="toc-text">8.作用域的机制</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#8-1%E5%8F%98%E9%87%8F%E8%B5%8B%E5%80%BC%E6%9C%BA%E5%88%B6"><span class="toc-number">1.8.1.</span> <span class="toc-text">8.1变量赋值机制</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#8-2%E5%8F%98%E9%87%8F%E8%AE%BF%E9%97%AE%E6%9C%BA%E5%88%B6"><span class="toc-number">1.8.2.</span> <span class="toc-text">8.2变量访问机制</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#9-%E9%A2%84%E8%A7%A3%E6%9E%90-1-x2F-29"><span class="toc-number">1.9.</span> <span class="toc-text">9.预解析   1&#x2F;29</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#9-1%E9%A2%84%E8%A7%A3%E6%9E%90"><span class="toc-number">1.9.1.</span> <span class="toc-text">9.1预解析**</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#9-2%E9%A2%84%E8%A7%A3%E6%9E%90%E7%9A%84%E9%87%8D%E5%91%BD%E5%90%8D%E9%97%AE%E9%A2%98"><span class="toc-number">1.9.2.</span> <span class="toc-text">9.2预解析的重命名问题</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#10-%E5%AF%B9%E8%B1%A1%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-number">1.10.</span> <span class="toc-text">10.对象数据类型</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#10-1Object"><span class="toc-number">1.10.1.</span> <span class="toc-text">10.1Object</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#10-2%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%93%8D%E4%BD%9C"><span class="toc-number">1.10.2.</span> <span class="toc-text">10.2对象的基本操作**</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#10-3%E4%B8%A4%E7%A7%8D%E8%BF%90%E7%AE%97%E7%AC%A6%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">1.10.3.</span> <span class="toc-text">10.3两种运算符的区别**</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#10-4%E5%AF%B9%E8%B1%A1%E7%9A%84%E9%81%8D%E5%8E%86"><span class="toc-number">1.10.4.</span> <span class="toc-text">10.4对象的遍历</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#10-5%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E5%AD%98%E5%82%A8%E4%B8%8A%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">1.10.5.</span> <span class="toc-text">10.5数据类型存储上的区别**</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#10-6%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E8%B5%8B%E5%80%BC%E4%B8%8A%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">1.10.6.</span> <span class="toc-text">10.6数据类型赋值上的区别</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#11-%E6%8E%92%E5%BA%8F-1-x2F-30"><span class="toc-number">1.11.</span> <span class="toc-text">11.排序 1&#x2F;30</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#12-%E6%95%B0%E7%BB%84%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95"><span class="toc-number">1.12.</span> <span class="toc-text">12.数组常用方法</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#12-1%E6%95%B0%E7%BB%84-push"><span class="toc-number">1.12.1.</span> <span class="toc-text">12.1数组.push()</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-2%E6%95%B0%E7%BB%84-pop"><span class="toc-number">1.12.2.</span> <span class="toc-text">12.2数组.pop()</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-3%E6%95%B0%E7%BB%84-unshift"><span class="toc-number">1.12.3.</span> <span class="toc-text">12.3数组.unshift()</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-4%E6%95%B0%E7%BB%84-shift"><span class="toc-number">1.12.4.</span> <span class="toc-text">12.4数组.shift()</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-5%E6%95%B0%E7%BB%84-reserve"><span class="toc-number">1.12.5.</span> <span class="toc-text">12.5数组.reserve()</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-6%E6%95%B0%E7%BB%84-sort"><span class="toc-number">1.12.6.</span> <span class="toc-text">12.6数组.sort()</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-7%E6%95%B0%E7%BB%84-sort-function-a-b-return-a-b"><span class="toc-number">1.12.7.</span> <span class="toc-text">12.7数组.sort(function(a,b){return a-b})</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-8%E6%95%B0%E7%BB%84-sort-function-a-b-return-a-b"><span class="toc-number">1.12.8.</span> <span class="toc-text">12.8数组.sort(function(a,b){return a-b})</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-9%E6%95%B0%E7%BB%84-splice-%E5%BC%80%E5%A7%8B%E7%9A%84%E7%B4%A2%E5%BC%95%EF%BC%8C%E6%88%AA%E5%8F%96%E7%9A%84%E6%95%B0%E9%87%8F"><span class="toc-number">1.12.9.</span> <span class="toc-text">12.9数组.splice(开始的索引，截取的数量)</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-10%E6%95%B0%E7%BB%84-concat-%E6%95%B0%E6%8D%AE"><span class="toc-number">1.12.10.</span> <span class="toc-text">12.10数组.concat(数据)</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-11%E6%95%B0%E7%BB%84-join-%E2%80%98%E8%BF%9E%E6%8E%A5%E7%AC%A6%E2%80%99"><span class="toc-number">1.12.11.</span> <span class="toc-text">12.11数组.join(‘连接符’)</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-12%E6%95%B0%E7%BB%84-slice-%E5%BC%80%E5%A7%8B%E7%B4%A2%E5%BC%95%EF%BC%8C%E7%BB%93%E6%9D%9F%E7%B4%A2%E5%BC%95"><span class="toc-number">1.12.12.</span> <span class="toc-text">12.12数组.slice(开始索引，结束索引)</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-13%E6%95%B0%E7%BB%84-indexOf-%E6%95%B0%E6%8D%AE%EF%BC%8C%E5%BC%80%E5%A7%8B%E7%B4%A2%E5%BC%95"><span class="toc-number">1.12.13.</span> <span class="toc-text">12.13数组.indexOf(数据，开始索引)</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-14%E6%95%B0%E7%BB%84-forEach-item-index-arr-x3D-gt"><span class="toc-number">1.12.14.</span> <span class="toc-text">12.14数组.forEach((item,index,arr)&#x3D;&gt;{})</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-15%E6%95%B0%E7%BB%84-map-item-index-arr-x3D-gt-return-item-10"><span class="toc-number">1.12.15.</span> <span class="toc-text">12.15数组.map((item,index,arr)&#x3D;&gt;{return item*10})</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-16%E6%95%B0%E7%BB%84-filter-x3D-gt-return-item-gt-10"><span class="toc-number">1.12.16.</span> <span class="toc-text">12.16数组.filter(()&#x3D;&gt;{return item&gt;10})</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-17%E6%95%B0%E7%BB%84-every-item-index-arr-x3D-gt-%E6%95%B0%E7%BB%84-some-item-index-arr-x3D-gt"><span class="toc-number">1.12.17.</span> <span class="toc-text">12.17数组.every((item,index,arr)&#x3D;&gt;{}) || 数组.some((item,index,arr)&#x3D;&gt;{})</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-18%E6%95%B0%E7%BB%84-reduce-prev-item-index-arr-x3D-gt"><span class="toc-number">1.12.18.</span> <span class="toc-text">12.18数组.reduce((prev,item,index,arr)&#x3D;&gt;{})</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12-19%E6%95%B0%E7%BB%84%E5%A1%8C%E9%99%B7%E2%80%94%E5%87%BA%E7%8E%B0%E5%9C%A8%E6%95%B0%E7%BB%84%E4%B8%AD%E5%88%A0%E9%99%A4%E6%95%B0%E6%8D%AE%E7%9A%84%E6%97%B6%E5%80%99-1-x2F-31"><span class="toc-number">1.12.19.</span> <span class="toc-text">12.19数组塌陷—出现在数组中删除数据的时候 1&#x2F;31</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#13-%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D"><span class="toc-number">1.13.</span> <span class="toc-text">13.数组去重</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#14-%E5%AD%97%E7%AC%A6%E9%9B%86"><span class="toc-number">1.14.</span> <span class="toc-text">14.字符集</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#15-%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95"><span class="toc-number">1.15.</span> <span class="toc-text">15.字符串常用方法</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#15-1%E5%AD%97%E7%AC%A6%E4%B8%B2-replace-%E2%80%98%E6%8D%A2%E4%B8%8B%E5%AD%97%E7%AC%A6%E2%80%99-%E2%80%99%E6%8D%A2%E4%B8%8A%E5%AD%97%E7%AC%A6%E2%80%99"><span class="toc-number">1.15.1.</span> <span class="toc-text">15.1字符串.replace(‘换下字符’,’换上字符’)</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#15-2%E5%AD%97%E7%AC%A6%E4%B8%B2-split-%E2%80%98%E5%88%87%E5%89%B2%E7%AC%A6%E5%8F%B7%E2%80%99"><span class="toc-number">1.15.2.</span> <span class="toc-text">15.2字符串.split(‘切割符号’)</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#15-3%E4%BB%BB%E5%8A%A1%EF%BC%9A%E6%9B%BF%E6%8D%A2%E6%95%8F%E6%84%9F%E8%AF%8D"><span class="toc-number">1.15.3.</span> <span class="toc-text">15.3任务：替换敏感词</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#16-%E6%9F%A5%E8%AF%A2%E5%AD%97%E7%AC%A6%E4%B8%B2-2-x2F-1"><span class="toc-number">1.16.</span> <span class="toc-text">16.查询字符串 2&#x2F;1</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#16-1%E6%8A%8A%E5%AF%B9%E8%B1%A1%E8%BD%AC%E6%8D%A2%E6%88%90%E6%9F%A5%E8%AF%A2%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%88%E4%B8%BA%E4%BA%86%E6%8A%8A%E5%89%8D%E7%AB%AF%E5%BE%97%E5%88%B0%E7%9A%84%E6%95%B0%E6%8D%AE%E7%BB%99%E5%90%8E%E7%AB%AF%E4%BD%BF%E7%94%A8%EF%BC%89"><span class="toc-number">1.16.1.</span> <span class="toc-text">16.1把对象转换成查询字符串（为了把前端得到的数据给后端使用）</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#16-2%E6%8A%8A%E6%9F%A5%E8%AF%A2%E5%AD%97%E7%AC%A6%E4%B8%B2%E8%BD%AC%E6%88%90%E5%AF%B9%E8%B1%A1%EF%BC%88%E4%B8%BA%E4%BA%86%E5%90%8E%E7%AB%AF%E7%9A%84%E6%95%B0%E6%8D%AE%E4%BC%A0%E5%88%B0%E5%89%8D%E7%AB%AF%EF%BC%89"><span class="toc-number">1.16.2.</span> <span class="toc-text">16.2把查询字符串转成对象（为了后端的数据传到前端）</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#17-json%E6%A0%BC%E5%BC%8F%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-number">1.17.</span> <span class="toc-text">17.json格式字符串</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#18-%E6%93%8D%E4%BD%9C%E6%95%B0%E5%AD%97%E7%9A%84%E6%96%B9%E6%B3%95"><span class="toc-number">1.18.</span> <span class="toc-text">18.操作数字的方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#19-%E6%97%B6%E9%97%B4%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.19.</span> <span class="toc-text">19.时间对象</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#19-1time-getTime"><span class="toc-number">1.19.1.</span> <span class="toc-text">19.1time.getTime()</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#19-2%E6%97%B6%E9%97%B4%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%A1%88%E4%BE%8B-2-x2F-2"><span class="toc-number">1.19.2.</span> <span class="toc-text">19.2时间格式化案例 2&#x2F;2</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#19-3%E6%97%B6%E9%97%B4%E5%B7%AE%E6%A1%88%E4%BE%8B"><span class="toc-number">1.19.3.</span> <span class="toc-text">19.3时间差案例</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#19-4%E5%AE%9A%E6%97%B6%E5%99%A8"><span class="toc-number">1.19.4.</span> <span class="toc-text">19.4定时器</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#19-5js%E7%9A%84%E5%BC%82%E6%AD%A5%E4%BB%A3%E7%A0%81%E6%89%A7%E8%A1%8C%E6%9C%BA%E5%88%B6"><span class="toc-number">1.19.5.</span> <span class="toc-text">19.5js的异步代码执行机制</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#19-6%E5%80%92%E8%AE%A1%E6%97%B6%E6%A1%88%E4%BE%8B"><span class="toc-number">1.19.6.</span> <span class="toc-text">19.6倒计时案例</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#20-%E8%AE%A4%E8%AF%86BOM%E6%A8%A1%E5%9E%8B-2-x2F-3"><span class="toc-number">1.20.</span> <span class="toc-text">20.认识BOM模型  2&#x2F;3</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#20-1%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E7%AA%97%E5%8F%A3%E5%B0%BA%E5%AF%B8"><span class="toc-number">1.20.1.</span> <span class="toc-text">20.1浏览器的窗口尺寸</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#20-2%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E5%9C%B0%E5%9D%80%E6%A0%8F"><span class="toc-number">1.20.2.</span> <span class="toc-text">20.2浏览器的地址栏</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#20-3%E6%89%93%E5%BC%80%E6%96%B0%E7%9A%84%E6%A0%87%E7%AD%BE%E9%A1%B5"><span class="toc-number">1.20.3.</span> <span class="toc-text">20.3打开新的标签页</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#20-4%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8D%B7%E5%8E%BB%E7%9A%84%E5%B0%BA%E5%AF%B8"><span class="toc-number">1.20.4.</span> <span class="toc-text">20.4浏览器卷去的尺寸</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#20-5BOM%E5%AE%9E%E4%BE%8B"><span class="toc-number">1.20.5.</span> <span class="toc-text">20.5BOM实例</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#21-DOM%E6%A8%A1%E5%9E%8B"><span class="toc-number">1.21.</span> <span class="toc-text">21.DOM模型</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#21-1DOM%E7%9A%84%E4%BB%8B%E7%BB%8D"><span class="toc-number">1.21.1.</span> <span class="toc-text">21.1DOM的介绍</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#21-2%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0"><span class="toc-number">1.21.2.</span> <span class="toc-text">21.2获取元素</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#22-%E6%93%8D%E4%BD%9C%E5%85%83%E7%B4%A0%E5%86%85%E5%AE%B9"><span class="toc-number">1.22.</span> <span class="toc-text">22.操作元素内容</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#22-1document-createElement-%E2%80%98%E6%A0%87%E7%AD%BE%E5%90%8D%E2%80%99"><span class="toc-number">1.22.1.</span> <span class="toc-text">22.1document.createElement(‘标签名’)</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#22-2%E5%85%83%E7%B4%A0-appendChild"><span class="toc-number">1.22.2.</span> <span class="toc-text">22.2元素.appendChild()</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#23-%E5%8A%A8%E6%80%81%E6%B8%B2%E6%9F%93%E8%A1%A8%E6%A0%BC%E6%A1%88%E4%BE%8B"><span class="toc-number">1.23.</span> <span class="toc-text">23.动态渲染表格案例</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#24-3%E6%93%8D%E4%BD%9C%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F"><span class="toc-number">1.23.1.</span> <span class="toc-text">24.3操作元素样式</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#24-4%E6%93%8D%E4%BD%9C%E5%85%83%E7%B4%A0%E7%B1%BB%E5%90%8D"><span class="toc-number">1.23.2.</span> <span class="toc-text">24.4操作元素类名**</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#24-5%E5%88%86%E9%A1%B5%E6%B8%B2%E6%9F%93%E6%A1%88%E4%BE%8B"><span class="toc-number">1.23.3.</span> <span class="toc-text">24.5分页渲染案例</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#25-%E8%8E%B7%E5%8F%96%E5%B0%BA%E5%AF%B8"><span class="toc-number">1.24.</span> <span class="toc-text">25.获取尺寸</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#25-1%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E5%B0%BA%E5%AF%B8"><span class="toc-number">1.24.1.</span> <span class="toc-text">25.1获取元素尺寸</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#25-2%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E5%81%8F%E7%A7%BB%E9%87%8F"><span class="toc-number">1.24.2.</span> <span class="toc-text">25.2获取元素偏移量</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#25-3%E8%8E%B7%E5%8F%96%E7%AA%97%E5%8F%A3%E5%B0%BA%E5%AF%B8%E5%AE%BD%E9%AB%98"><span class="toc-number">1.24.3.</span> <span class="toc-text">25.3获取窗口尺寸宽高</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#25-4%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A"><span class="toc-number">1.24.4.</span> <span class="toc-text">25.4事件绑定</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#25-5%E4%BA%8B%E4%BB%B6%E8%A7%A3%E7%BB%91"><span class="toc-number">1.24.5.</span> <span class="toc-text">25.5事件解绑</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#25-6%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.24.6.</span> <span class="toc-text">25.6事件对象</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#25-7%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%E4%B8%AD%E7%9A%84%E5%B0%BA%E5%AF%B8%E5%B1%9E%E6%80%A7"><span class="toc-number">1.24.7.</span> <span class="toc-text">25.7事件对象中的尺寸属性</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#26-%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%E7%9A%84%E4%BC%A0%E6%92%AD"><span class="toc-number">1.25.</span> <span class="toc-text">26.事件对象的传播</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#26-1%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%E7%9A%84%E4%BC%A0%E6%92%AD%E9%A1%BA%E5%BA%8F"><span class="toc-number">1.25.1.</span> <span class="toc-text">26.1事件对象的传播顺序</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#26-2%E8%8E%B7%E5%8F%96%E4%BA%8B%E4%BB%B6%E7%9B%AE%E6%A0%87-e-target-e-srcElement"><span class="toc-number">1.25.2.</span> <span class="toc-text">26.2获取事件目标 e.target || e.srcElement**</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#26-3%E9%98%BB%E6%AD%A2%E4%BA%8B%E4%BB%B6%E4%BC%A0%E6%92%AD"><span class="toc-number">1.25.3.</span> <span class="toc-text">26.3阻止事件传播</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#26-4%E9%98%BB%E6%AD%A2%E9%BB%98%E8%AE%A4%E8%A1%8C%E4%B8%BA"><span class="toc-number">1.25.4.</span> <span class="toc-text">26.4阻止默认行为</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#27-%E4%BA%8B%E4%BB%B6%E5%A7%94%E6%89%98"><span class="toc-number">1.26.</span> <span class="toc-text">27.事件委托**</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#28-%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%EF%BC%882023-3-x2F-9%EF%BC%89"><span class="toc-number">1.27.</span> <span class="toc-text">28.正则表达式（2023.3&#x2F;9）</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#28-1%E5%88%9B%E5%BB%BA%E6%96%B9%E6%B3%95"><span class="toc-number">1.27.1.</span> <span class="toc-text">28.1创建方法</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#28-2%E9%AA%8C%E8%AF%81%E6%96%B9%E6%B3%95"><span class="toc-number">1.27.2.</span> <span class="toc-text">28.2验证方法</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#175-186%E8%AF%BE%E7%A8%8B%E8%B7%B3%E8%BF%87%EF%BC%8C%E6%84%9F%E8%A7%89%E7%94%A8%E5%A4%84%E4%B8%8D%E6%98%AF%E5%BE%88%E5%A4%A7"><span class="toc-number">1.27.3.</span> <span class="toc-text">175-186课程跳过，感觉用处不是很大</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#29-%E8%87%AA%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0"><span class="toc-number">1.28.</span> <span class="toc-text">29.自执行函数</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#29-1%E8%87%AA%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0%EF%BC%88%E6%A6%82%E5%BF%B5%E6%9C%89%E7%82%B9%E6%84%8F%E6%80%9D%EF%BC%8C%E5%8F%AF%E8%83%BD%E6%AF%94%E8%BE%83%E9%87%8D%E8%A6%81%EF%BC%89"><span class="toc-number">1.28.1.</span> <span class="toc-text">29.1自执行函数（概念有点意思，可能比较重要）</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#29-2%E5%BC%BA%E8%A1%8C%E6%94%B9%E5%8F%98this%E6%8C%87%E5%90%91"><span class="toc-number">1.28.2.</span> <span class="toc-text">29.2强行改变this指向</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#30-ES6"><span class="toc-number">1.29.</span> <span class="toc-text">30.ES6</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#30-1ES6%E5%AE%9A%E4%B9%89%E5%8F%98%E9%87%8F"><span class="toc-number">1.29.1.</span> <span class="toc-text">30.1ES6定义变量</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#30-2ES6%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-number">1.29.2.</span> <span class="toc-text">30.2ES6模板字符串</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#30-3ES6%E7%9A%84%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0"><span class="toc-number">1.29.3.</span> <span class="toc-text">30.3ES6的箭头函数</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#30-4%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0%E9%BB%98%E8%AE%A4%E5%80%BC"><span class="toc-number">1.29.4.</span> <span class="toc-text">30.4函数参数默认值</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#30-5ES6%E7%9A%84%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC"><span class="toc-number">1.29.5.</span> <span class="toc-text">30.5ES6的解构赋值</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#30-6ES6%E7%9A%84%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">1.29.6.</span> <span class="toc-text">30.6ES6的扩展运算符</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#30-6%E8%BF%90%E5%8A%A8%E5%87%BD%E6%95%B0"><span class="toc-number">1.29.7.</span> <span class="toc-text">30.6运动函数</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#31-%E8%AE%A4%E8%AF%86%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.30.</span> <span class="toc-text">31.认识面向对象</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#31-1%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E7%9A%84%E4%B9%A6%E5%86%99"><span class="toc-number">1.30.1.</span> <span class="toc-text">31.1构造函数的书写</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#31-2%E5%AF%B9%E8%B1%A1%E8%AE%BF%E9%97%AE%E6%9C%BA%E5%88%B6"><span class="toc-number">1.30.2.</span> <span class="toc-text">31.2对象访问机制</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#32-%E5%8E%9F%E5%9E%8B%E5%92%8C%E5%8E%9F%E5%9E%8B%E9%93%BE"><span class="toc-number">1.31.</span> <span class="toc-text">32.原型和原型链</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#33-ES6%E7%9A%84%E7%B1%BB%E7%9A%84%E8%AF%AD%E6%B3%95%EF%BC%88ES5%E6%9E%84%E9%80%A0%E6%96%B9%E6%B3%95%E5%92%8C%E7%B1%BB%E7%9A%84%E5%8D%87%E7%BA%A7%EF%BC%8C%E4%BD%BF%E7%94%A8%E8%B5%B7%E6%9D%A5%E6%9B%B4%E5%8A%A0%E6%98%8E%E7%A1%AE%EF%BC%89"><span class="toc-number">1.32.</span> <span class="toc-text">33.ES6的类的语法（ES5构造方法和类的升级，使用起来更加明确）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#34-%E8%B4%AA%E5%90%83%E8%9B%87%E5%AE%9E%E4%BE%8B%EF%BC%88%E6%B2%A1%E6%9C%89%E7%B4%A0%E6%9D%90%E6%97%A0%E6%B3%95%E5%AE%9E%E7%8E%B0%EF%BC%89"><span class="toc-number">1.33.</span> <span class="toc-text">34.贪吃蛇实例（没有素材无法实现）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#35-%E5%89%8D%E5%90%8E%E7%AB%AF%E4%BA%A4%E4%BA%92"><span class="toc-number">1.34.</span> <span class="toc-text">35.前后端交互</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#35-1%E8%AF%B7%E6%B1%82%E6%96%B9%E5%BC%8F"><span class="toc-number">1.34.1.</span> <span class="toc-text">35.1请求方式</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#35-2%E7%99%BB%E5%BD%95%E9%A1%B5%E9%9D%A2%EF%BC%88%E6%B2%A1%E6%9C%89%E6%9C%8D%E5%8A%A1%E5%99%A8-%E4%B8%8D%E4%BA%86%E8%A7%A3node-js%EF%BC%89"><span class="toc-number">1.34.2.</span> <span class="toc-text">35.2登录页面（没有服务器-不了解node.js）</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#35-3ajax%E7%8A%B6%E6%80%81%E7%A0%81"><span class="toc-number">1.34.3.</span> <span class="toc-text">35.3ajax状态码</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#35-4http%E7%8A%B6%E6%80%81%E7%A0%81"><span class="toc-number">1.34.4.</span> <span class="toc-text">35.4http状态码</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#35-5ajax%E5%B0%81%E8%A3%85"><span class="toc-number">1.34.5.</span> <span class="toc-text">35.5ajax封装</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#35-6-268-273%E8%B7%B3%E8%BF%87"><span class="toc-number">1.34.6.</span> <span class="toc-text">35.6  268-273跳过</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#36-%E8%AE%A4%E8%AF%86Promise"><span class="toc-number">1.35.</span> <span class="toc-text">36.认识Promise</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#36-1aysnc%E5%92%8Cawait"><span class="toc-number">1.35.1.</span> <span class="toc-text">36.1aysnc和await</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#37-%E8%AE%A4%E8%AF%86%E6%9C%8D%E5%8A%A1%E5%99%A8-284"><span class="toc-number">1.36.</span> <span class="toc-text">37.认识服务器(284)</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#37-1php%E8%AF%AD%E6%B3%95"><span class="toc-number">1.36.1.</span> <span class="toc-text">37.1php语法</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#37-2php%E6%93%8D%E4%BD%9C%E6%95%B0%E6%8D%AE%E5%BA%93"><span class="toc-number">1.36.2.</span> <span class="toc-text">37.2php操作数据库</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#37-3%E6%95%B0%E6%8D%AE%E5%BA%93"><span class="toc-number">1.36.3.</span> <span class="toc-text">37.3数据库</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#37-4%E7%99%BB%E5%BD%95%E9%80%BB%E8%BE%91%E5%AE%9E%E7%8E%B0"><span class="toc-number">1.36.4.</span> <span class="toc-text">37.4登录逻辑实现</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#38-cookie"><span class="toc-number">1.37.</span> <span class="toc-text">38.cookie</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#38-1cookie%E7%9A%84%E7%89%B9%E6%80%A7%EF%BC%88%E4%B9%9F%E6%98%AF%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8%E7%9A%84%E4%B8%80%E7%A7%8D%EF%BC%89"><span class="toc-number">1.37.1.</span> <span class="toc-text">38.1cookie的特性（也是本地存储的一种）</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#38-2%E5%89%8D%E7%AB%AF%E8%AF%AD%E8%A8%80%E8%AE%BE%E7%BD%AEcookie-2023-x2F-3-x2F-14"><span class="toc-number">1.37.2.</span> <span class="toc-text">38.2前端语言设置cookie 2023&#x2F;3&#x2F;14</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#38-3%E5%90%8E%E7%AB%AF%E8%AF%AD%E8%A8%80%E8%AE%BE%E7%BD%AEcookie"><span class="toc-number">1.37.3.</span> <span class="toc-text">38.3后端语言设置cookie</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#38-4%E5%9C%B0%E5%9D%80"><span class="toc-number">1.37.4.</span> <span class="toc-text">38.4地址</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#38-5%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5"><span class="toc-number">1.37.5.</span> <span class="toc-text">38.5同源策略</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#38-6jsonp"><span class="toc-number">1.37.6.</span> <span class="toc-text">38.6jsonp</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#38-6%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E"><span class="toc-number">1.37.7.</span> <span class="toc-text">38.6搜索引擎</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#38-7cors%E8%B7%A8%E5%9F%9F"><span class="toc-number">1.37.8.</span> <span class="toc-text">38.7cors跨域</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#38-8%E4%BB%A3%E7%90%86%E8%B7%A8%E5%9F%9F%EF%BC%88proxy"><span class="toc-number">1.37.9.</span> <span class="toc-text">38.8代理跨域（proxy)</span></a></li></ol></li></ol></li></ol>
    </div>

    <div id="share-footer" style="display: none">
      <ul>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.facebook.com/sharer.php?u=https://ke-jiabiao.gitee.io/develop/2023/03/23/front_end/%E7%9F%A5%E4%B9%8E%EF%BC%9AJS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/"><i class="fab fa-facebook fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://twitter.com/share?url=https://ke-jiabiao.gitee.io/develop/2023/03/23/front_end/%E7%9F%A5%E4%B9%8E%EF%BC%9AJS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&text=JS零基础入门到精通"><i class="fab fa-twitter fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.linkedin.com/shareArticle?url=https://ke-jiabiao.gitee.io/develop/2023/03/23/front_end/%E7%9F%A5%E4%B9%8E%EF%BC%9AJS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&title=JS零基础入门到精通"><i class="fab fa-linkedin fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://pinterest.com/pin/create/bookmarklet/?url=https://ke-jiabiao.gitee.io/develop/2023/03/23/front_end/%E7%9F%A5%E4%B9%8E%EF%BC%9AJS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&is_video=false&description=JS零基础入门到精通"><i class="fab fa-pinterest fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=JS零基础入门到精通&body=Check out this article: https://ke-jiabiao.gitee.io/develop/2023/03/23/front_end/%E7%9F%A5%E4%B9%8E%EF%BC%9AJS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/"><i class="fa-solid fa-envelope fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://getpocket.com/save?url=https://ke-jiabiao.gitee.io/develop/2023/03/23/front_end/%E7%9F%A5%E4%B9%8E%EF%BC%9AJS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&title=JS零基础入门到精通"><i class="fab fa-get-pocket fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://reddit.com/submit?url=https://ke-jiabiao.gitee.io/develop/2023/03/23/front_end/%E7%9F%A5%E4%B9%8E%EF%BC%9AJS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&title=JS零基础入门到精通"><i class="fab fa-reddit fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.stumbleupon.com/submit?url=https://ke-jiabiao.gitee.io/develop/2023/03/23/front_end/%E7%9F%A5%E4%B9%8E%EF%BC%9AJS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&title=JS零基础入门到精通"><i class="fab fa-stumbleupon fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://digg.com/submit?url=https://ke-jiabiao.gitee.io/develop/2023/03/23/front_end/%E7%9F%A5%E4%B9%8E%EF%BC%9AJS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&title=JS零基础入门到精通"><i class="fab fa-digg fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.tumblr.com/share/link?url=https://ke-jiabiao.gitee.io/develop/2023/03/23/front_end/%E7%9F%A5%E4%B9%8E%EF%BC%9AJS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&name=JS零基础入门到精通&description="><i class="fab fa-tumblr fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://news.ycombinator.com/submitlink?u=https://ke-jiabiao.gitee.io/develop/2023/03/23/front_end/%E7%9F%A5%E4%B9%8E%EF%BC%9AJS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&t=JS零基础入门到精通"><i class="fab fa-hacker-news fa-lg" aria-hidden="true"></i></a></li>
</ul>

    </div>

    <div id="actions-footer">
        <a id="menu" class="icon" href="#" onclick="$('#nav-footer').toggle();return false;"><i class="fa-solid fa-bars fa-lg" aria-hidden="true"></i> Menu</a>
        <a id="toc" class="icon" href="#" onclick="$('#toc-footer').toggle();return false;"><i class="fa-solid fa-list fa-lg" aria-hidden="true"></i> TOC</a>
        <a id="share" class="icon" href="#" onclick="$('#share-footer').toggle();return false;"><i class="fa-solid fa-share-alt fa-lg" aria-hidden="true"></i> Share</a>
        <a id="top" style="display:none" class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fa-solid fa-chevron-up fa-lg" aria-hidden="true"></i> Top</a>
    </div>

  </div>
</div>

        
        <footer id="footer">
  <div class="footer-left">
    Copyright &copy;
    
    
    2016-2023
    man虎下山
  </div>
  <div class="footer-right">
    <nav>
      <ul>
        <!--
       --><li><a href="/develop/">Home</a></li><!--
     --><!--
       --><li><a href="/develop/about/">About</a></li><!--
     --><!--
       --><li><a href="/develop/archives/">Writing</a></li><!--
     --><!--
       --><li><a target="_blank" rel="noopener" href="http://github.com/probberechts">Projects</a></li><!--
     -->
      </ul>
    </nav>
  </div>
</footer>

    </div>
    <!-- styles -->



  <link rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" crossorigin="anonymous" onload="this.onload=null;this.rel='stylesheet'"/>


    <!-- jquery -->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>




<!-- clipboard -->

  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.7/clipboard.min.js" crossorigin="anonymous"></script>
  
  <script type="text/javascript">
  $(function() {
    // copy-btn HTML
    var btn = "<span class=\"btn-copy tooltipped tooltipped-sw\" aria-label=\"Copy to clipboard!\">";
    btn += '<i class="fa-regular fa-clone"></i>';
    btn += '</span>';
    // mount it!
    $(".highlight table").before(btn);
    var clip = new ClipboardJS('.btn-copy', {
      text: function(trigger) {
        return Array.from(trigger.nextElementSibling.querySelectorAll('.code')).reduce((str,it)=>str+it.innerText+'\n','')
      }
    });
    clip.on('success', function(e) {
      e.trigger.setAttribute('aria-label', "Copied!");
      e.clearSelection();
    })
  })
  </script>


<script src="/develop/js/main.js"></script>

<!-- search -->

<!-- Baidu Analytics -->

<!-- Cloudflare Analytics -->

<!-- Disqus Comments -->

<!-- utterances Comments -->

</body>
</html>
